在React.js中的父组件和子组件之间进行通信

Question

刚遇到一个关于React中父子组件之间通信的问题。

儿童

var Child = React.createClass({
    getInitialState() {
        return {
            childState: this.props.state,
        };
    },
    changeState(e) {
        this.setState({e.target.id});
    },
    render: function () {
        return (
            <button id='1' onClick={this.changeState}>1</button>
            <button id='2' onClick={this.changeState}>2</button>
        );
    },
});

父级

var Parent = React.createClass({
    getInitialState() {
        return {
            parentState: '1',
        };
    },
    render: function () {
        return (
            <Child state=this.state.parentState />
        );
    },
});

因此，现在Parent会将初始状态'1'传递给child，我希望child组件可以同时更改child和parent的状态。 例如，当单击第二个按钮时，子状态和父状态都设置为“ 2”。 我该如何实现？ 谢谢大家！

Answer 1

要实现此行为，您需要通过道具与父组件进行通信。

var Child = React.createClass({
    render: function () {
        return (
            <button id='1' onClick={this.props.changeState}>1</button>
            <button id='2' onClick={this.props.changeState}>2</button>
        );
    },
});

var Parent = React.createClass({
    getInitialState() {
        return {
            parentState: '1',
        };
    },
    changeState: function(){
      this.setState({parentState: e.target.id});
    },
    render: function () {
        return (
            <Child changeState={this.changeState} state={this.state.parentState} />
        );
    },
});

其背后的想法是，您要将changeState函数作为一个函数从父组件传递到子组件，并使其可以通过prop进行访问。 这样，当您在子组件中调用prop函数时，父组件中的函数将被执行。

这样，您也不需要在子组件中保持第二个“单独”状态，因为父组件的状态将在两个组件中均可用，并且在两个组件中具有相同的值。

如果有任何输入错误，请原谅我-我在办公室，但由于您还没有答案，我想提供帮助。