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

Posted 2023-02-24

【中文标题】如何在 ReactJS 中有条件地加载组件

【英文标题】：How to load components conditionally in 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 上的图标时，都会重复此操作。我如何设置这种通信方式？

【参考方案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。