React 父子组件和非父子组件传值

 

零、 this .props

    可以接收到 外界的传值 和 此组件标签内部自定义的方法

 

    例：

        <one vals={message} sendVal={this.handleReverse.bind(this)}></one>

 

    此时在子组件中打印this.props

        this.props = {

            vals : '**',

            sendVal : fn

        }

 

    由此我们可以进行父子组件之间传值

 

一、父传子

    在子组件标签中用自定义属性进行传递，接收的时候通过this.props进行接收

    

    /* 父组件【自定义属性为 val 传的值为message】 */

        

<Fragment>
    <one val={message}></one>
</Fragment>

 

    /* 子组件【this.props对象中会出现 自定义属性,可以通过this.props.<属性名> 获取传值 】 */

        

render(){
    let {val} = this.props;
    return (
        <Fragment>
            <div>接收来自父组件的传值：{val}</div>
        </Fragment>
    )
}      

 

二、子传父

    在子组件标签内部用自定义属性定义一个方法传递给子组件 子组件调用这个方法传递参数

 

    /* 父组件 */

        

render(){
    return (
        <Fragment>
            <one send={this.handleRevese.bind(this)}></one>
        </Fragment>
    )
}
 
handleRevese(params){
    console.log('来自子组件的传值' + params);
}    

 

    /* 子组件 */

        

render(){
    return (
        <Fragment>
            <button onClick={this.handleSend.bind(this)}>向父组件传值</button>                      
        </Fragment>
    )
}
 
handleSend(){
    this.props.send(this.state.mess);
}

 

三、非父子【使用自己封装的$on $emit $off】

    One组件

        

render(){
    return (
        <div>
            <button onClick={this.handleTwo.bind(this)}>发送给Two组件</button>
        </div>
    )
}
 
handleTwo(){
    Observer.$emit("handle",this.state.oneVal);
}       

 

    Two组件

        

constructor(){
    super();
    this.state = {
        oneVal:""
    }
    Observer.$on("handle",(val)=>{
        this.setState({
            oneVal:val
        })
    })
}
 
render(){
    let {oneVal} = this.state;
    return (
        <div>接收到one组件的值为：{oneVal}</div>
    )
}