react组件间的信息交流数据传递图文讲解

发布时间:2019-07-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了react组件间的信息交流数据传递图文讲解脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
React 组件之间交流的方式,可以分为以下 3 种:
a【父组件】向【子组件】传值;
b【子组件】向【父组件】传值;
c 没有任何嵌套关系的组件之间传值(PS:比如:兄弟组件之间传值)

1.父组件向子组件传递信息

这个比较容易和直观

// 父组件
var MyContainer = React.createClass({
  getInitialstate: function () {
    return {
      checked: true
    };
  },
  render: function() {
    return (
      <ToggleButton text="Toggle me" checked={this.state.checked} />
    );
  }
});

// 子组件
var ToggleButton = React.createClass({
  render: function () {
    // 从【父组件】获取的值
    var checked = this.props.checked,
        text = this.props.text;

    return (
        <label>{text}: <input type="checkbox" checked={checked} /></label>
    );
  }
});

react组件间的信息交流数据传递图文讲解

2子组件向父组件传递信息

子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化。

//子组件
var Child = React.createClass({
    render: function(){
        return (
            <div>
                请输入邮箱:<input onChange={this.props.handleEmail}/>
            </div>
        )
    }
});
//父组件,此处通过event.target.value获取子组件的值
var Parent = React.createClass({
    getInitialState: function(){
        return {
            email: ''
        }
    },
    handleEmail: function(event){
        this.setState({email: event.target.value});
    },
    render: function(){
        return (
            <div>
                <div>用户邮箱:{this.state.email}</div>
                <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
            </div>
        )
    }
});
React.render(
  <Parent />,
  document.getElementById('test')
);

react组件间的信息交流数据传递图文讲解

3.兄弟组件传递信息

我们可以通过给这两兄弟一个共同的父亲,然后结合上面的两种方法
将老大的信息传给父亲(子传父),再通过父亲传给老二信息实现交流(父传子)

这里只写出了父组件代码实现input到list的数据传递

class CommentApp extends Component {
    constructor() {
        super()
        this.state = {
            arry: []
        }
    }
    getDate(obj) {
        this.state.arry.push(obj)
        this.setState({
            arry: this.state.arry
        })
        console.log(this.state.arry)
    }
    render() {
        return (
            <div>
                <CommentInput date={this.getDate.bind(this)}/>
                <CommentList arry={this.state.arry}/>
            </div>
        )
    }
}

脚本宝典总结

以上是脚本宝典为你收集整理的react组件间的信息交流数据传递图文讲解全部内容,希望文章能够帮你解决react组件间的信息交流数据传递图文讲解所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。