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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (40)

这是来自ReactJS的新发起人。不易获得易于掌握的资源促使我再次敲诈SO。问题是这个。我有一个React组件,即RegisterAccount点击时发射另一个组件(弹出窗口),允许用户填写所需的详细信息以注册一个帐户。现在,一旦帐户成功注册,我想添加注册帐户作为另一个组件RegisterAccount。我怎样才能建立这种沟通?

//In RegisterAccount
<addAccount/> //pop-up
<accountAdded/> //if account added, then show this component
提问于
用户回答回答于

如果我正确理解你的问题,你正试图更新当状态改变时显示哪个组件(例如用户创建一个帐户),并且该状态被子组件改变。这是一个显示孩子 - >父母沟通的基本示例。

在这种情况下,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);
用户回答回答于

我是React新手。我也在寻找如何。我看到这篇文章!它像下面这样说

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

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励