Условный внутри модуля React

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

Вы должны управлять этой логикой в ​​более высоком порядке. Компонент, который включает оба ваших соседних компонента.

Элемент Higher должен управлять selectedUsers как массив в его состоянии. Он должен передать это как опоры для обоих смежных компонентов, которые у вас уже есть.

При изменении своего собственного состояния (или ответа на соответствующее действие со стороны пользователя) более высокий компонент должен проверить, является ли selectedUsers пустым массивом. Если это так, он должен скрыть все действия, которые вы хотите предпринять в этот момент.

Answer 2

Как сделать это хорошо объяснено в документации React here

В вашем случае самый простой способ сделать то, что вы хотите, будет использовать тройные операторы внутри JSX:

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

Это будет render <SomeComponent/> если значение some_condition правдиво, или <SomeOtherComponent/> если нет. Очевидно, настроить состояние и компоненты в соответствии с вашим кодом.

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


    } 
});