react总结之数据传递的几种方式

责编:menVScode 2017-08-03 14:18 阅读(547)

         props(属性):组件之间的数据传递,是通过props来执行的。但本文总结了几种组件传递数据的方式。

        先把涉及到的案例代码先贴出来,父级组件:

import React from 'react';
import ReactDom from 'react-dom';
import ListWrap from 'listWrap/ListWrap.js';

var newData = [
	{
		picUrl : require('img/11.jpg'),
		title : '逾20城出现首套房贷利率上浮 或加速楼市降温',
		info : '在严厉的楼市调控政策以及银根收紧的背景下,影响房价的最大因素房贷及房贷利率,进入了严控期,收紧情况堪称史上最严。',
		view : 10,
		collection : 3
	},
	...
]
ReactDom.render(
	<div className='pd20'>
		<ListWrap />
	</div>,
	document.getElementById('content')
)

        子组件ListWrap:

import React,{Component} from 'react';
import List from 'list/List.js'

export default class ListWrap extends Component {
	render(){
		let {newData,nihao} = this.props;
		var items = [];
		 items = newData.map((ele,i)=>{
		 	return <List {...ele} key={i} />
		 })
		return (
			<ul className='news f-cb'>
				{items}
			</ul>
		)
	}
}

        子组件Nav:

import React,{Component} from 'react';

export default class List extends Component{
	render(){
		let {picUrl,title,info,view,collection} = this.props;
		return(
			<li className='pd10'>
				<dl>
					<dd><img src={picUrl} /></dd>
					<dt>{title}</dt>
					<dd>{info}</dd>
					<dd><span>浏览:{view}</span>&nbsp;&nbsp;&nbsp;<span>收藏:{collection}</span></dd>
				</dl>
			</li>
		)
	}
}

    

        方式一

import React from 'react';
import ReactDom from 'react-dom';
import ListWrap from 'listWrap/ListWrap.js';

var newData = [
	{
		picUrl : require('img/11.jpg'),
		title : '逾20城出现首套房贷利率上浮 或加速楼市降温',
		info : '在严厉的楼市调控政策以及银根收紧的背景下,影响房价的最大因素房贷及房贷利率,进入了严控期,收紧情况堪称史上最严。'
	},
	...
]
ReactDom.render(
	<div className='pd20'>
		<ListWrap newData={newData}/>
	</div>,
	document.getElementById('content')
)

        newData={newData},这种是常用的组件之间数据传递方式。ListWrap可以通过this.props来获取父组件传递下来的数据。


        方式二

import React from 'react';
import ReactDom from 'react-dom';
import ListWrap from 'listWrap/ListWrap.js';

var newData = [
	{
		picUrl : require('img/11.jpg'),
		title : '逾20城出现首套房贷利率上浮 或加速楼市降温',
		info : '在严厉的楼市调控政策以及银根收紧的背景下,影响房价的最大因素房贷及房贷利率,进入了严控期,收紧情况堪称史上最严。'
	},
	...
]
ReactDom.render(
	<div className='pd20'>
		<ListWrap {...{newData}}/>
	</div>,
	document.getElementById('content')
)

        {...{newData}},语法糖的写法。


        方式三

import React from 'react';
import ReactDom from 'react-dom';
import ListWrap from 'listWrap/ListWrap.js';

var newData = [
	{
		picUrl : require('img/11.jpg'),
		title : '逾20城出现首套房贷利率上浮 或加速楼市降温',
		info : '在严厉的楼市调控政策以及银根收紧的背景下,影响房价的最大因素房贷及房贷利率,进入了严控期,收紧情况堪称史上最严。'
	},
	...
]
var str = 'menvscode.com'
ReactDom.render(
	<div className='pd20'>
		<ListWrap {...{newData,str}}/>
	</div>,
	document.getElementById('content')
)

        {...{newData,str},还能在添加其他的需要传入的字段。

标签: props react
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码