【React】入門第七天 - 組件傳值

組件傳值

---

父向子組件傳值

和本地模式一樣使用props傳遞數據

子組件向父組件傳值

首先我們在父組件定義一個傳遞的props，叫fuFun，這個其實是一個函數調用自己定義的dataFun

<News user = {user} fuFun = {this.dataFun}/>

父組件完整代碼

import React, { Component } from "react";

import News from "./News";

let user = {
    name : "laoshiren",
    text : "hello,react props",
}
export default class Home extends Component {

    constructor(props){
        super(props)
        this.state= {
            text:"default"
        }
    }

    dataFun=(params) =>{
        console.log(params)
        // 設置states 
        this.setState ({
            text : params
        }) 
    }

    render(){
        return ( <div>
            Home 組件
            <div></div>
            {this.state.text}
            {/* <img src = {MyPic}></img> */}
            {/* 將dataFun方法 當做props 傳給子組件，將值傳回給dataFun方法中 */}
            <News user = {user} fuFun = {this.dataFun}/>
        </div> )
    }
}

然後我們在子組件的按鈕進行傳值

{/*向父組件發送數據，調用父組件的props的fufun，*/}
<button onClick={ this.props.fuFun.bind(this,this.state.text) } >send to parentComponent</button>

向父組件傳值，我們通過props.fuFun.bind去傳遞，然後父組件接收到執行了 dataFun(params)方法將他的值設置到了state中

子組件代碼

import React, { Component } from "react";


export default class News extends Component {

    constructor(props){
        super(props)

        this.state = {
            text : this.props.user.text,
            name: this.props.user.name,
        }
    }

    changeState(params){
        this.setState(params)
    }

    render(){
        return ( <div>
            News 組件
            <div></div>
            <p>text : {this.props.user.text}</p>
            <p>name : {this.state.name}</p>
            <button onClick={this.changeState.bind(this,{name:"laoshiren dev"})} >click to change state</button>
            <div></div>
            {/*向父組件發送數據，調用父組件的props的fufun，*/}
            <button onClick={ this.props.fuFun.bind(this,this.state.text) } >send to parentComponent</button>
        </div> )
    }
}

所以運行一開始，我們父組件的text是default，當觸發了子組件的onClick事件後text修改爲了hello,react props

同級組件傳值

首先安裝pubsub

npm i --save pubsub-js

創建一個和News同級的組件，並且需要引用pubsub-js

import React, { Component } from "react";

export default class Phone extends Component {
    render(){
        return ( <div>
            Phone 組件
            <div></div>
        </div> )
    }
}

完整代碼

import React, { Component } from "react";

import pubsub from "pubsub-js"

export default class News extends Component {

    constructor(props){
        super(props)
        this.state = {
            text : this.props.user.text,
            name: this.props.user.name,
        }
    }

    changeState(params){
        this.setState(params)
    }

    pubsub(){
        pubsub.publish("evt",this.state.name)
    }

    render(){
        return ( <div>
            News 組件
            <div></div>
            <p>text : {this.props.user.text}</p>
            <p>name : {this.state.name}</p>
            <button onClick={this.changeState.bind(this,{name:"laoshiren dev"})} >click to change state</button>
            <div></div>
            {/*向父組件發送數據，調用父組件的props的fufun，*/}
            <button onClick={ this.props.fuFun.bind(this,this.state.text) } >send to parentComponent</button>
            <div></div>
            <button onClick={ this.pubsub.bind(this) } >send to subComponent</button>
        </div> )
    }
}

import React, { Component } from "react";

import pubsub from "pubsub-js"

export default class Phone extends Component {

    constructor(props){
        super(props)
        this.state = {}
        pubsub.subscribe("evt",(msg,data)=>{

            console.log(data)
            this.setName(data)
        })
    }

    setName(params) {
        this.setState({name:params})
    }

    render(){
        return ( <div>
            Phone 組件
        <div>{this.state.name}</div>
        </div> )
    }
}

當按鈕按下觸發pubsub方法，然後pubsub發佈事件，在同級組件監聽這evt當有值過來的時候，就修改了state，有點生產者消費者模式的感覺。