反應如何更新另一個組件的狀態？

Question

我很反應，試圖使一些組件工作。 我有

    ObjectA:React.createClass({
        propTypes: {
           ...

        },

        getInitialState: function() {
            return {
                myState: null
            }
        },

        updateMyState: function(value) {
           this.setState({
               myState: value
           })
        }

        render: function() {
            return (<div className="my-class">'hello' +{this.state.myState}</div>);
          }
    });

    ObjectB:React.createClass({
            propTypes: {
               ...

            },

            render: function() {
                return (<div className="my-class"><ObjectA / >

            </div>);
            }
        });

我想從ObjectB更新ObjectA的狀態。 我怎么能在ObjectB中調用ObjectA的updateMyState方法？ 謝謝！

Answer 1

React的基本思想是單向數據流。 這意味着數據僅通過子項的屬性從祖先組件向下傳遞給子組件。 對於這個簡單的例子，我們將Flux（如體系結構和事件發射器）排除在等式之外，因為它根本不是必需的。

然后，從外部更改組件狀態的唯一方法是更改​​它在父級的render方法中接收的道具。 所以myState實際上將存在於ObjectB中並被賦予ObjectA作為屬性。 在您的示例中，如下所示：

ObjectA:React.createClass({
    propTypes: {
       ...

    },

    render: function() {
        return (<div className="my-class">'hello' +{ this.props.name }</div>);
      }
});

ObjectB:React.createClass({
    propTypes: {
       ...

    },

    getInitialState: function() {
        return {
            name: null
        }
    },

    onNameChange: function(newName) {
        this.setState({ name: newName })
    },

    render: function() {
        return (
            <div className="my-class">
                <ObjectA name={ this.state.name } />
            </div>
        );
    }
});