私があなたの質問を正しく理解していれば、状態が変化したとき (ユーザーがアカウントを作成したときなど) に表示するコンポーネントを更新しようとしており、その状態は子コンポーネントによって変更されています。これは、子 -> 親の通信を示す基本的な例です。
この場合、RegisterAccount
コンポーネントはルート コンポーネントです。この例で使用されている状態を知る必要がある別のコンポーネントの子である場合hasAccount
、状態はチェーンの上位に格納する (そして prop として渡す) 方がよいでしょう。
この例の jsfiddle
/** @jsx React.DOM */
var AddAccount = React.createClass({
handleRegistration: function() {
this.props.updateAccount(true);
},
render: function() {
return <a onClick={this.handleRegistration}>Create my account</a>;
}
});
var AccountAdded = React.createClass({
render: function() {
return <span>Account exists now</span>;
}
});
var RegisterAccount = React.createClass({
getInitialState: function() {
return {
hasAccount: false
};
},
updateAccountStatus: function(status) {
this.setState({
hasAccount: status
});
},
render: function() {
return (
<div>
{this.state.hasAccount ? <AccountAdded /> : <AddAccount updateAccount={this.updateAccountStatus} />}
</div>
);
}
});
React.renderComponent(<RegisterAccount />, document.body);