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