react新旧版属性和传值

属性  props

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

属性传值

原版

1  key-value形式  this.props取值

ReactDOM.render(<Dome name="HHHHH" arr={arr} obj={obj}/>,document.getElementById("box"))

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

var obj ={
    name:"yy"
}

取值 this.props.name

ReactDOM.render(<Dome {...obj}/>,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(
            <div>
                <h2>给子组件传值</h2>
                <input type="text" ref="ipt" />
                <button onClick={this.tap.bind(this)}>点击</button>
                <hr/>
                
                <Child name={this.state.str}/>
            </div>

            
        )
    }

}

class Child extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        console.log(this.props.name)
        return(
            <div>
                <h2>子组件</h2>
                <p>接收父组件传来的值--{this.props.name}</p>

            </div>
        )
    }

}

ReactDOM.render(<Dome/>,document.getElementById("box"))

子到父的传值

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

class Dome extends React.Component{
    constructor(props){
        super(props)
        this.state={
            str:""
        }  
    }
    render(){
        var _this=this
        return(
            <div>
                <h2>给子组件传值</h2>
                <p>接收子组件传来的值--{this.state.str}</p>

                <hr/>
                
                <Child name={function(mag){
                        _this.setState({str:mag}) 
                }}/>
            </div> 
        )
    }
}
class Child extends React.Component{
    constructor(props){
        super(props)
    }

    tap(){
        this.props.name(this.refs.ipt.value)
    }
    render(){
        return(
            <div>
                <h2>子组件</h2>
                <input type="text" ref="ipt" />
                <button onClick={this.tap.bind(this)}>发送</button>
            </div>
        )
    }
}

ReactDOM.render(<Dome/>,document.getElementById("box"))

SPA 单页面