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

父傳子：

　　父組件：自定義名

<ChildCom content={‘我是父級過來的內容‘}/>

　　子組件：使用this.props.自定義的名字接收

 <div>{this.props.content}</div>

子傳父：

　　子組件：事件傳遞 記著加bind（this）

import React from ‘react‘
class ChildCom extends React.Component {
 valueToParent(value) {
 　　this.props.onValue(value);
 }
 render() {
 return (
 <div>
 <h2>子組件</h2>
 <div>
 　　<a onClick={this.valueToParent.bind(this,123)}>向父組件傳值123</a>
 </div>
 </div>
 )
 }
}
export 
 
default ChildCom;

　　父組件：

import React from ‘react‘
import ChildCom from ‘./childCom.js‘
class ParentCom extends React.Component {
 state = {
     getChildValue: ‘‘
 }
 getChildValue(value) {
     this.setState({
         getChildValue: value
     })
 }
 render() {
 return (
 <div>
 　 　<h1>父組件</h1>
 　　 <div>子組件過來的值為：{this
 
.state.getChildValue}</div>
     <ChildCom onValue={this.getChildValue.bind(this)}/>
 </div>
 )
 }
}
export default ParentCom;        

下面是詳細的傳值可以再看一次：

父組件向子組件傳值：

父組件Comment.js:

 1 import React from "react"
 2 import ComentList from "./ComentList"
 3  
 4 class Comment extends React.Component {
 5     constructor(props) {
 6         super(props);
 7         this.state = {
 8             arr: [{
 9                 "userName": "fangMing", "text": "123333", "result": true
10             }, {
11                 "userName": "zhangSan", "text": "345555", "result": false
12             }, {
13                 "userName": "liSi", "text": "567777", "result": true
14             }, {
15                 "userName": "wangWu", "text": "789999", "result": true
16             },]
17         }
18     }
19  
20  
21  
22    
23  
24     render() {
25         return (
26             <div>
27                 <ComentList arr={this.state.arr}> //這裏把state裏面的arr傳遞到子組件
28                 </ComentList>
29                
30             </div>
31  
32         )
33     }
34 }
35  
36 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了

使用react進行父子組件傳值