有條件的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模塊內部

回答

相關問題