blocks|key|166130|text|如果我没理解错的话，您正在尝试更新状态更改时要显示的组件(例如，用户创建了一个帐户)，该状态由一个子组件更改。这是一个基本的例子，展示了子->父进程的通信。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|166131|在本例中，RegisterAccount组件是根组件。如果它是另一个组件的子组件，该组件也需要知道本例中使用的hasAccount状态，那么状态可能会更好地存储在链的更高位置(并作为道具向下传递)。|offset|length|style|CODE|166132|jsfiddle+of+this+example|166133|/**+@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);|code-block|syntax|javascript|166134|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/8Z49K/1/^0|0|5|F|1J|A|0|0|O|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|J|3|K|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>If I understand your question correctly, you are trying to update which component to display when the state changes (e.g. the user creates an account), with that state being altered by a child component. Here is a basic example showing child -> parent communication.</p>

<p>In this case, the <code>RegisterAccount</code> component is a root component. If it was a child of another component(s) which also needed to know the <code>hasAccount</code> state used in this example, then the state would likely be better off stored higher up the chain (and passed down as a prop).</p>

<p><a href="http://jsfiddle.net/8Z49K/1/" rel="noreferrer">jsfiddle of this example</a></p>

<pre><code>/** @jsx React.DOM */

var AddAccount = React.createClass({
  handleRegistration: function() {
    this.props.updateAccount(true);
  },
  render: function() {
    return &lt;a onClick={this.handleRegistration}&gt;Create my account&lt;/a&gt;;
  }
});

var AccountAdded = React.createClass({
  render: function() {
    return &lt;span&gt;Account exists now&lt;/span&gt;;
  }
});

var RegisterAccount = React.createClass({
  getInitialState: function() {
    return {
      hasAccount: false
    };
  },
  updateAccountStatus: function(status) {
    this.setState({
      hasAccount: status
    });
  },
  render: function() {
    return (
      &lt;div&gt;
        {this.state.hasAccount ? &lt;AccountAdded /&gt; : &lt;AddAccount updateAccount={this.updateAccountStatus} /&gt;}
      &lt;/div&gt;
    );
  }
});

React.renderComponent(&lt;RegisterAccount /&gt;, document.body);
</code></pre>


blocks|key|166219|text|在你的render函数中，你可以在你的标签中有一个变量，条件是displayed...sort为，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|166220|render:+function(){
+++var+conditionalTag;
+++if(conditionalTag)+++<AccountAdded/>

+++return+(
++++++<AddAccount/>
++++++{+conditionalTag+}+
+++)

}|code-block|syntax|javascript|166221|仅当变量中包含jsx时，才会呈现conditionalTag|166222|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>In your render function you can have a variable with your tag that is conditionally displayed...sort of like this:</p>

<pre><code>render: function(){
   var conditionalTag;
   if(conditionalTag)   &lt;AccountAdded/&gt;

   return (
      &lt;AddAccount/&gt;
      { conditionalTag } 
   )

}
</code></pre>

<p>conditionalTag will only be rendered if the variable has jsx in it</p>


blocks|key|166273|text|我是个新手。我也在寻找方法。我看到了这个article！它说的就像下面|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|166274|render+:+function()
{
++++return+(
++++++++<div>
++++++++{+true+&&+<AddAccount+/>+}
++++++++{+false+&&+<AccountAdded+/>+}
++++++++</div>
++++);
}|code-block|syntax|javascript|166275|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/facebook/react/issues/690^0|K|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>I'm new to React. I was also finding how. and I saw this <a href="https://github.com/facebook/react/issues/690">article</a>!
It says like belows</p>

<pre><code>render : function()
{
    return (
        &lt;div&gt;
        { true &amp;&amp; &lt;AddAccount /&gt; }
        { false &amp;&amp; &lt;AccountAdded /&gt; }
        &lt;/div&gt;
    );
}
</code></pre>


<p>This is from a new starter of ReactJS. Unavailability of easily graspable resources has prompted me to knock at SO again. The issue is this. I have a React Component namely, <code>RegisterAccount</code> which when clicked shoots another component (a pop-up) allowing users to fill in the required details to register an account. Now once an account is successfully registered, I want to add the registered account as another component under <code>RegisterAccount</code>. How can I have this communication set up?</p>

<pre><code>//In RegisterAccount
&lt;addAccount/&gt; //pop-up
&lt;accountAdded/&gt; //if account added, then show this component
</code></pre>


How to load components conditionally in ReactJS

这是来自ReactJS的一个新启动器。容易掌握的资源的不可获得性促使我再次抨击这种做法。问题是这样的。我有一个React组件，即RegisterAccount，当单击它时会弹出另一个组件(弹出窗口)，允许用户填写注册帐户所需的详细信息。现在，一旦成功注册了一个帐户，我希望将已注册的帐户添加为RegisterAccoun...

问如何在ReactJS中有条件地加载组件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在ReactJS中有条件地加载组件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在ReactJS中有条件地加载组件
EN