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和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函数从父Component传递给子Component作为函数，并通过props访问它。这样当你在子组件中调用prop函数时 - 父组件中的函数将被执行。

这样你也不需要保持第二个＆＃34;分开＆＃34;您的子组件中的状态，因为父组件的状态将在两者中都可用，并且在两者中都具有相同的值。

请原谅我输入的任何错误 - 我在办公室，但既然你没有答案，我想帮忙。

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

1 个答案: