有条件的React模块内部

我有两个相邻的React模块，它们将用户从另一个模块中添加/删除。如果所有用户已从“删除用户”模块中删除，返回通知的最佳方法是什么。例如，这里是我的模块，用户被删除：有条件的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中没有用户，我想返回“您还没有选择任何用户”。我想知道在模块内部做什么最有效的方法。

来源

2016-02-19 JordanBarber

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

更高组件应该将selectedUsers作为其状态中的数组来管理。它应该把这个作为道具传递给你已经拥有的相邻组件。

当修改它自己的状态（或者由用户响应相关操作）时，高级组件应该检查selectedUsers是否为空数组。如果是这样，它应该启动你希望在那一刻发生的任何动作。

来源

2016-02-19 19:43:01 gravityplanx

如何做到这一点是深受阵营文档here

解释你的情况给你想要的东西会使用三元运营商的JSX里面最简单的方法：

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

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

来源

2016-02-19 19:47:03

比方说，你是路过选择的用户列表，此组件

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> 
    ) 


    } 
});

来源

2016-02-19 19:49:11 WitVault

有条件的React模块内部

回答

相关问题