react新旧版属性和传值

属性  props

属性和状态是react中数据传递的载体

属性传值

原版

1  key-value形式  this.props取值

ReactDOM.render(,document.getElementById("box"))

2  展开式传入 (只使用与对象)

var obj ={
    name:"yy"
}

取值 this.props.name

ReactDOM.render(,document.getElementById("box"))

3  内部声明getDefaultProps

创建时内部声明
getDefaultProps(){
        return{
            str:"hh",
            obj:{
                name:"tj"
            },
            arr:[1,2,3]

        }
    }

4  es6 使用 组件.defaultProps --构造器（this.props.xxx）

1：     Dome.defaultProps={
            str:"hhhh"
    }

2：       constructor(props){
                super(props)
            this.props.str="hello"
        }
只能写单个数据 不能以对象或者数组的方式赋值

属性值定义后不能修改（没有事件修改）

新版

1  key-value形式

2  展开式传入

3   ers 使用 组件.defaultProps --构造器（this.props.xxx）

状态 state

低版
getInitialState 初始状态

    getInitialState(){
        return{
            arr:"哈哈哈"
        }
    }
通过事件 改变状态

 tap(){
        this.setState({
            arr:"hello"
        })
    }

高版

在constructor中通过this.state={}设置

constructor(props){
        super(props)
        this.props.str="hello"
        this.state={
            str:"name",
            obj:{
                name:"哈哈哈"
            },
            att:[1,2,3]

        }
    }

更改值借助事件

tap（）{
    this.setState({
    arr:"hello"
})
}

this.state.str

传值

父组件->子组件的传值

属性和状态 把父组件传递的数据以状态值的形式存储 通过在子组件标签上绑定一个属性名 子组件内
部通过接受属性的形式把值接受过来

class Dome extends React.Component{
    constructor(props){
        super(props)

        this.state={
            str:""
        }

        
    }
    
    tap(){
        console.log(this.refs.ipt.value)
        this.setState({str:this.refs.ipt.value})
        
    }
    render(){

        return(
           

               

给子组件传值

               
                点击
               

---

                
               
           

            
        )
    }

}

class Child extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        console.log(this.props.name)
        return(
           

               

子组件

               

接收父组件传来的值--{this.props.name}

           

        )
    }

}

ReactDOM.render(,document.getElementById("box"))

子到父的传值

子组件传递以函数的形式绑定到子组件标签上属性名的值 参数传入的数据 父组件通过标签状态的存
储进行赋值

class Dome extends React.Component{
    constructor(props){
        super(props)
        this.state={
            str:""
        }  
    }
    render(){
        var _this=this
        return(
           

               

给子组件传值

               

接收子组件传来的值--{this.state.str}

               

---

                
                                        _this.setState({str:mag}) 
                }}/>
           

 
        )
    }
}
class Child extends React.Component{
    constructor(props){
        super(props)
    }

    tap(){
        this.props.name(this.refs.ipt.value)
    }
    render(){
        return(
           

               

子组件

               
                发送
           

        )
    }
}

ReactDOM.render(,document.getElementById("box"))

SPA 单页面