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

【问题标题】：How to load components conditionally in ReactJS如何在 ReactJS 中有条件地加载组件
【发布时间】：2014-02-12 05:42:13
【问题描述】：

这是来自 ReactJS 的新手。容易掌握的资源不可用促使我再次敲门。问题是这样的。我有一个 React 组件，即RegisterAccount，单击它会触发另一个组件（弹出窗口），允许用户填写注册帐户所需的详细信息。现在一旦成功注册了一个帐户，我想将注册的帐户添加为RegisterAccount下的另一个组件。我该如何设置这种通信方式？

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

【问题讨论】：

要点是 <div>{isAccountAdded ? <accountAdded /> : <addAccount />}</div> — 这只是 JavaScript，因此您可以在组件的渲染方法中编码任意逻辑。
嗨@andreypopp，谢谢，但恐怕这不是我想要的。假设 RegisterAccount 有一个图标，单击该图标时必须弹出 AddAccount 组件，并且一旦以某种方式注册了帐户，RegisterAccount 必须知道发生了注册（可能来自 AddAccount），然后它应该包含 AccountAdded 组件。每次单击 RegisterAccount 上的图标时，都会重复此操作。我如何设置这种通信方式？

标签： javascript reactjs

【解决方案1】：

如果我正确理解您的问题，您正在尝试更新在状态更改时要显示的组件（例如用户创建帐户），而该状态由子组件更改。这是一个显示子 -> 父通信的基本示例。

在这种情况下，RegisterAccount 组件是根组件。如果它是另一个组件的子组件，也需要知道此示例中使用的hasAccount 状态，那么最好将状态存储在链的更高位置（并作为道具向下传递）。

jsfiddle of this example

/** @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.renderComponent( 已经过时了。对我有用：ReactDOM.render( 代替
@mpaepper 是的。 React.renderComponent 已弃用。您应该使用import ReactDOM from 'react-dom'; 并改用ReactDOM.render(<RegisterAccount />, document.body);。

【解决方案2】：

在你的渲染函数中，你可以有一个带有标签的变量，有条件地显示......有点像这样：

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

   return (
      <AddAccount/>
      { conditionalTag } 
   )

}

conditionalTag 仅在变量中包含 jsx 时才会呈现

【讨论】：

【解决方案3】：

我是 React 新手。我也在寻找方法。我看到了这个article！它像下面这样说

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

【讨论】：

简单而有效。无需添加内联样式来有条件地隐藏组件。谢谢;)
这是一个不错的解决方案，虽然不是很明显
render 函数不会使用 null 呈现变量，因此您可以编写 let yourComponent = null; 和稍后（在某种情况下）yourComponent = <YourComponent />; 然后在您的 render 中编写 { yourComponent } .

【解决方案4】：

您还可以执行以下操作，根据返回 true 或 false 的属性 condition，您可以渲染或不渲染。这只是一个例子，条件也可能来自方法等：

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

您还可以找到更多详细信息here。

【讨论】：