使用react進行父子組件傳值

在單頁面里面，父子組件傳值是比較常見的，之前一直用vue開發，今天研究了一下react的父子組件傳值，和vue差不多的思路，父組件向子組件傳值，父通過初始state，子組件通過this.props進行接收就可以了；子組件向父組件傳值需要綁定一個事件，然后事件是父組件傳遞過來的this.props.event來進行值的更替，話不多說，上代碼：

父組件向子組件傳值：

父組件Comment.js:

import React from "react"
import ComentList from "./ComentList"

class Comment extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            arr: [{
                "userName": "fangMing", "text": "123333", "result": true
            }, {
                "userName": "zhangSan", "text": "345555", "result": false
            }, {
                "userName": "liSi", "text": "567777", "result": true
            }, {
                "userName": "wangWu", "text": "789999", "result": true
            },]
        }
    }



  

    render() {
        return (
            <div>
                <ComentList arr={this.state.arr}> //這里把state里面的arr傳遞到子組件
                </ComentList>
              
            </div>

        )
    }
}

export default Comment;

　　

子組件ComentList.js:

import React from "react"

class ComentList extends React.Component {
    constructor(props) {
        super(props);

    }
    render() {
        return (
            <div className="list">
                <ul>
                    {
                        this.props.arr.map(item => { //這個地方通過this.props.arr接收到父組件傳過來的arr，然后在{}里面進行js的循環
                            return (
                                <li key={item.userName}>
                                    {item.userName} 評論是:{item.text}
                                </li>
                            )
                        })
                    }
                </ul>
            
            </div>
        )
    }
}

export default ComentList;

　父組件向子組件傳值是比較容易的，我們來看一下效果：

好了，我們開始重頭戲，

子組件向父組件傳值，

同樣是父組件：

import React from "react"
import ComentList from "./ComentList"

class Comment extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            parentText: "this is parent text",
  
            arr: [{
                "userName": "fangMing", "text": "123333", "result": true
            }, {
                "userName": "zhangSan", "text": "345555", "result": false
            }, {
                "userName": "liSi", "text": "567777", "result": true
            }, {
                "userName": "wangWu", "text": "789999", "result": true
            },]
        }
    }

    fn(data) {
        this.setState({
            parentText: data //把父組件中的parentText替換為子組件傳遞的值
        },() =>{
           console.log(this.state.parentText);//setState是異步操作，但是我們可以在它的回調函數里面進行操作
        });

    }



    render() {
        return (
            <div>
                //通過綁定事件進行值的運算，這個地方一定要記得.bind(this)，
            不然會報錯，切記切記，因為通過事件傳遞的時候this的指向已經改變
                <ComentList arr={this.state.arr} pfn={this.fn.bind(this)}> 
                </ComentList>
                <p>
                    text is {this.state.parentText}
                </p>
       
            </div>

        )
    }
}

export default Comment;                        

　　子組件：

import React from "react"

class ComentList extends React.Component {
    constructor(props) {
        super(props);
        this.state = ({
            childText: "this is child text"
        })

    }
    clickFun(text) {
        this.props.pfn(text)//這個地方把值傳遞給了props的事件當中
    }
    render() {
        return (
            <div className="list">
                <ul>
                    {
                        this.props.arr.map(item => {
                            return (
                                <li key={item.userName}>
                                    {item.userName} 評論是:{item.text}
                                </li>
                            )
                        })
                    }
                </ul>
                //通過事件進行傳值，如果想得到event，可以在參數最后加一個event，
                這個地方還是要強調，this，this，this
                <button onClick={this.clickFun.bind(this, this.state.childText)}>
                    click me
                </button>
            </div>
        )
    }
}

export default ComentList;            

　　

before：

after：

 

 最后想說一點，如果嵌套的父子組件很深好幾層，這個時候我想你應該考慮用狀態管理工具redux了