# reacr中父子组件之间的通讯,一看就懂

WEB前端 waitig 460℃ 百度已收录 0评论

reacr中父子组件之间的通讯,一看就懂

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} />
![这里写图片描述](http://img.blog.csdn.net/20171022130041930?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzMzMjM0Njk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

本文由【waitig】发表在等英博客
本文固定链接:# reacr中父子组件之间的通讯,一看就懂
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)