26

これは、ReactJS の新しいスターターからのものです。簡単に把握できるリソースが利用できないため、SO を再びノックするようになりました。問題はこれです。RegisterAccountつまり、クリックすると別のコンポーネント(ポップアップ)が起動し、ユーザーが必要な詳細を入力してアカウントを登録できるReactコンポーネントがあります。アカウントが正常に登録されたら、登録したアカウントを の下に別のコンポーネントとして追加しますRegisterAccount。この通信を設定するにはどうすればよいですか?

//In RegisterAccount
<addAccount/> //pop-up
<accountAdded/> //if account added, then show this component
4

4 に答える 4

18

私があなたの質問を正しく理解していれば、状態が変化したとき (ユーザーがアカウントを作成したときなど) に表示するコンポーネントを更新しようとしており、その状態は子コンポーネントによって変更されています。これは、子 -> 親の通信を示す基本的な例です。

この場合、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);
于 2014-01-23T03:00:52.287 に答える
2

レンダリング関数では、条件付きで表示されるタグを持つ変数を持つことができます...次のようなものです:

render: function(){
   var conditionalTag;
   if(conditionalTag)   <AccountAdded/>

   return (
      <AddAccount/>
      { conditionalTag } 
   )

}

conditionalTag は、変数に jsx が含まれている場合にのみレンダリングされます

于 2014-09-08T18:01:10.153 に答える