标签：苹果 ide 组合 logs 数组 状态 str opened pre
一、React数据的传输
1、属性和状态是react中数据传递的载体
2、属性是声明以后不允许被修改的东西
3、属性只能在组件初始化的时候声明并传入组件内部，并且在组件内部通过this.props获取
4、组件内部可以通过getDefaultProps声明默认属性
下面来说一下属性传值的两种方式：1.key-value形式 2.展开式
首先来看一下第一种传值方式：
var Demo = React.createClass({ render:function(){ var sty={width:‘500px‘,height:‘200px‘,border:‘1px solid red‘,margin:‘0 auto‘} console.log(this.props) return( <div> <h1>属性字符串:{this.props.name}</h1> <h1>属性数组:{this.props.aa[2]}</h1> <div style={sty}>{this.props.bb.age}<br/>{this.props.bb.age1}<br/>{this.props.bb.age2}</div> </div> ) } }) var str="hello react"; var arr=[‘你好‘,2222,‘hi‘]; var obj={ age:‘白雪公主‘, age1:‘七个小矮人‘, age2:‘毒苹果‘ } ReactDOM.render(<Demo name={str} aa={arr} bb={obj} cc={arrx} dd={arry}/>,document.getElementById("out")) /* 1/key-value形式 正常数据传值，组件内部this。props获取（对象） 2/｛...｝展开式传值 传输数据对对象形式，内部获取直接获取该对象的key名 */
然后我们再看一下第二种展开式的传值方式：
注：展开式传值不能传字符串！非对象的形式不要用展开式传值！
ReactDOM.render(<Demo1 {...obj}/>,document.getElementById(‘out‘))
组合数据：
var Demo = React.createClass({ render:function(){ var sty={width:‘500px‘,height:‘200px‘,border:‘1px solid red‘,margin:‘0 auto‘} console.log(this.props) return( <div> <h2>组合数据数组:{this.props.cc[1][0]}{this.props.cc[2].age}</h2> <h2>组合数据对象:{this.props.dd.name2.age} <br/> {this.props.dd.name3[0]}</h2> </div> ) } }) var arrx=[ ‘hello react‘, [‘你好‘,2222,‘hi‘], { age:‘白雪公主‘, age1:‘七个小矮人‘, age2:‘毒苹果‘ } ] var arry = { name:‘hello react‘, name2:{ age:‘白雪公主‘, age1:‘七个小矮人‘, age2:‘毒苹果‘ }, name3:[‘你好‘,2222,‘hi‘] } ReactDOM.render(<Demo name={str} aa={arr} bb={obj} cc={arrx} dd={arry}/>,document.getElementById("out"))
标签：苹果 ide 组合 logs 数组 状态 str opened pre
原文地址：http://www.cnblogs.com/ztl0918/p/6919016.html
