Лучшее место для хранения логики в приложении React?

Question

У меня есть два компонента. например Приборная панель и карты

Dashboard:

render() { 
     const elements = this.props.cards.map((card, key) => { 
      return (
       <Card item={card} onSave={this.onCardSave}> 
      ) 
     }) 
    } 

Card

render() { 
    return (
     <div class="card"> 
      <input type="checkbox" checked={this.state.item.checked} onChange={this.onChangeChecked} /> 
      { this.someCondition() && <input type="text" value={this.state.item.name} onChange={this.onChangeName} />} 
     </div> 
    ) 
} 

Так видимость текстового поля зависит от некоторых условий. Например:

function someCondition() { 
    return this.state.item.checked 
} 

!! Эта логика предназначена только для экземпляра карты

Итак, где же лучше всего хранить эту логику?

Внутри Карточка? (например, мой код)

Внутри Панель приборов? (Пройти все события в реквизите, например)

Если вы можете предоставить мне какую-то статью на эту тему, я был бы очень благодарен

Answer 1

Вы можете прочитать на апатриде против сохраняющих состояния компонентов (или смарта против тупого). Эта ссылка SO вполне понятна ReactJS difference between stateful and stateless

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

Надежда, что помогает

Answer 2

Нормальный подход сообщества работает с, это отдельные компоненты двух типов:

1. presentional компоненты: обеспокоены, как вещи выглядят .

2. компонента контейнер: озабоченный, как все работы.

Но одна из важных вещей, чтобы заметить это: «В то время как компоненты контейнера, как правило, с сохранением состояния и презентационные компоненты, как правило, являются лицами без гражданства, это не жесткое правило Презентативные компоненты могут быть отслеживанием состояния, и контейнеры могут быть. без гражданства ».

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

Полезные статьи: Дэн Абрамов, создатель Redux в: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.kyc0tpd11