# react中父子组件之间的通讯，一看就懂

1登峰造极

已于 2023-04-07 11:18:50 修改

阅读量1.1k

点赞数

分类专栏： react 文章标签： react-父子组件通讯 props用法

于 2017-10-22 13:01:53 首次发布

本文链接：https://blog.csdn.net/qq_33323469/article/details/78309416

版权

react 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

react中父子组件之间的通讯，一看就懂

1.首先我们通过class的方式声明父组件PopularizeList 在上面用const声明一个子组件PopularSuccess
注：我一般喜欢用const来声明子组件，看个人习惯
在这里的你前提要了解props的作用，看看菜鸟教程一下知道，如果你还是不懂，记住用这个东西来像父组件中取值就行，就是这么简单粗暴。
下面来看找哥哥demo,

import React, { Component } from 'react';

const PopularSuccess = (props) => {
    return (
        <div style={{background:"red"}}>
             <h2>子组件</h2>
             <input type="text"  value={props.data} />
        </div>
    )
};

class PopularizeList extends Component {
    constructor(props) {
        super(props);
        this.hand = this.hand.bind(this);
        this.state = {
           val:'默认值'      
        }
    }

     hand(e){
        let value = e.target.value;
        this.setState({val: value})

    };
  
    
    render() {
        return (
             <div>
                 <h1>父组件像子组件通讯</h1>
                 <input type='text' onChange={this.hand} value={this.state.val} />
                 <PopularSuccess  data = {this.state.val} />
             </div>
                    
        );
    }
}
export default PopularizeList;

下面这个data的作用我的了解就是子组件像父组件通讯的一个中介。由于本人很菜，只能像这么解释，然后在子组件通过props.data就拿到父组件中的值。当然这里可以随便自己定义了。不一定都是data

  <PopularSuccess  data = {this.state.val} />
![这里写图片描述](https://img-blog.csdn.net/20171022130041930?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzMzMjM0Njk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)