Question

我有两个相邻的React模块，用于添加/删除另一个用户。如果已从“删除用户”模块中删除所有用户，则返回通知的最佳方法是什么。例如，这是我删除用户的模块：

var React = require('react');

module.exports = React.createClass({

handleRemove: function () {
    this.props.onRemove(this.props.user.id);
},

render: function () {
    return (
        <div className="col-md-6">
            <div className="selected-user">
                <p onClick={this.handleRemove}>{this.props.user.first_name} {this.props.user.last_name}<i onClick={this.handleRemove} className="fa fa-close"></i></p>
            </div>
        </div>
    )
}
})

因此，如果“选定用户”div中没有用户，我想返回“您还没有选择任何用户”。我想知道在模块内部执行此操作的最有效方法是什么。

Answer 1

您应该在更高阶的组件中管理此逻辑，该组件包含两个相邻组件。

高级组件应将selectedUsers作为其状态中的数组进行管理。它应该将其作为道具传递给您已经拥有的两个相邻组件。

修改自己的状态（或响应用户的相关操作）时，Higher组件应检查selectedUsers是否为空数组。如果是，它应该触发您希望在那时发生的任何动作。

Answer 2

React文档here

很好地解释了如何做到这一点

在您的情况下，最简单的方法是在JSX中使用三元运算符：

render: function () {
    return (
        <div>
            {some_condition ? <SomeComponent/> : <SomeOtherComponent/>}
        </div>
    )
}

如果<SomeComponent/>的值为真，则会呈现some_condition，如果不是<SomeOtherComponent/>，则会呈现nditer。显然，调整条件和组件以匹配您的代码。

Answer 3

假设您要将所选用户的列表传递给此组件

var React = require('react');

module.exports = React.createClass({

  renderUsers:function(){
   return this.props.selectedUsers.map(function(user){
         <li>{user}</li>
    }
 },
  render: function () {
   var selectedUsers = this.props.selectedUsers||[];
   var component= selectedUsers.length===0
                  ?<div> No users selected</div>
                  :this.renderUsers();

    return (
             <div>
                {component}
             </div>
     )


  }
});

有条件的React模块内部

3 个答案: