如何在ReactJS中有条件地加载组件
如何在ReactJS中有条件地加载组件
提问于 2014-01-22 16:58:08
这是来自ReactJS的一个新启动器。容易掌握的资源的不可获得性促使我再次抨击这种做法。问题是这样的。我有一个React组件，即RegisterAccount，当单击它时会弹出另一个组件(弹出窗口)，允许用户填写注册帐户所需的详细信息。现在，一旦成功注册了一个帐户，我希望将已注册的帐户添加为RegisterAccount下的另一个组件。如何设置此通信？
//In RegisterAccount
<addAccount/> //pop-up
<accountAdded/> //if account added, then show this component回答 3
Stack Overflow用户
发布于 2016-01-23 10:54:10
我是个新手。我也在寻找方法。我看到了这个article！它说的就像下面
render : function()
{
return (
<div>
{ true && <AddAccount /> }
{ false && <AccountAdded /> }
</div>
);
}Stack Overflow用户
发布于 2014-01-23 11:00:52
如果我没理解错的话，您正在尝试更新状态更改时要显示的组件(例如，用户创建了一个帐户)，该状态由一个子组件更改。这是一个基本的例子，展示了子->父进程的通信。
在本例中，RegisterAccount组件是根组件。如果它是另一个组件的子组件，该组件也需要知道本例中使用的hasAccount状态，那么状态可能会更好地存储在链的更高位置(并作为道具向下传递)。
/** @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);Stack Overflow用户
发布于 2014-09-09 02:01:10
在你的render函数中，你可以在你的标签中有一个变量，条件是displayed...sort为，如下所示：
render: function(){
var conditionalTag;
if(conditionalTag) <AccountAdded/>
return (
<AddAccount/>
{ conditionalTag }
)
}仅当变量中包含jsx时，才会呈现conditionalTag
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21278299
复制相关文章
相似问题