web-dev-qa-db-ja.com

ReactJSでコンポーネントを条件付きでロードする方法

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

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

Reactは初めてです。私も方法を見つけていました。そして私はこれを見た 記事 ！下のように言う

render : function()
{
    return (
        <div>
        { true && <AddAccount /> }
        { false && <AccountAdded /> }
        </div>
    );
}
27
Yongnam Jeong

質問を正しく理解した場合、状態が変化したときに表示するコンポーネントを更新しようとしている（たとえば、ユーザーがアカウントを作成した）場合、その状態は子コンポーネントによって変更されます。これは、子->親のコミュニケーションを示す基本的な例です。

この場合、RegisterAccountコンポーネントはルートコンポーネントです。この例で使用されているhasAccount状態も知る必要がある別のコンポーネントの子である場合、状態はチェーンの上位に格納（およびプロップとして渡される）したほうがよいでしょう。 。

この例の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);
18
Michael LaCroix

また、次のことを行うこともでき、プロパティconditionがtrueまたはfalseを返すかどうかに応じて、レンダリングするかどうかを指定できます。これは単なる例であり、条件はメソッドなどからも発生する可能性があります。

export class MyClass extends React.Component{
    ...
    render(){
            <div>
                <img src='someSource' />
                {this.state.condition ? <MyElement /> : null}
            </div>
    }
}

より詳細な情報 こちら もご覧ください。

3
Red fx

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

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

   return (
      <AddAccount/>
      { conditionalTag } 
   )

}

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

2
SamiZ