一、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"))

React學習小結（三）