web-dev-qa-db-ja.com

React別のコンポーネントの状態を更新する方法は？

私は反応するのがかなり新しいです、いくつかのコンポーネントを動かそうとしています。私が持っています

    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>);
            }
        });

ObjectAの状態をObjectBから更新したい。 ObjectBでObjectAのupdateMyStateメソッドを呼び出すにはどうすればよいですか？ありがとう！

javascriptwebreactjsreact-nativefrontend
12
lucky_start_izumi

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>
        );
    }
});
17
d-vine