React学习小结

Posted 2020-09-20

一、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名
 */

View Code

 然后我们再看一下第二种展开式的传值方式：

注：展开式传值不能传字符串！非对象的形式不要用展开式传值！

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

View Code