Der beste Ort, um Logik in React App zu speichern?

Question

Ich habe zwei Komponenten. z.B. Armaturenbrett und Karte

Armaturenbrett:

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

Karte

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

So Textfeld Sichtbarkeit auf einer Bedingung abhängig. Zum Beispiel:

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

!! Diese Logik ist nur für die Karteninstanz

Wo also ist der beste Ort, um diese Logik zu speichern?

Innerhalb Karte? (wie mein Code)

Inside Armaturenbrett? (Für alle Veranstaltungen in Requisiten zum Beispiel passieren)

Wenn Sie mir einige Artikel zu diesem Thema zur Verfügung stellen können, wäre ich sehr dankbar

Answer 1

Sie können vs Stateful-Komponenten auf stateless lesen (oder Smart vs stumm). Diese SO-Verbindung ist ziemlich klar ReactJS difference between stateful and stateless

In Ihrem Beispiel würde Dashboard den Status für die Karte halten, da Sie wissen müssen, ob eine Karte überprüft wurde, damit Sie etwas anderes tun können (wie die Anzeige anderer Komponenten) l. Wenn Sie diese Logik in der Karte hatten, dann müssen Sie versuchen, das im Armaturenbrett zu verweisen, das lästig und schwieriger wird.

Hoffnung, die

Answer 2

Ein normaler Ansatz Gemeinschaft hilft mit arbeitet, ist separate Bauteile in zwei Typen:

1. presentional Komponenten: beschäftigen sich mit, wie die Dinge aussehen.

2. Container Komponenten: beschäftigen sich mit, wie die Dinge Arbeit.

Aber eines der wichtigsten Dinge zu bemerken ist: „Während Container-Komponenten sind in der Regel dazu neigen, Stateful und Präsentations-Komponenten sein, staatenlos zu sein, dies ist keine feste Regel Präsentations Komponenten Stateful sein können, und Behälter sein kann. auch staatenlos. "

Wie in Ihrem Fall hängt das Beispiel Ihrer Logik nur von der internen Logik der Komponente ab, daher ist es meiner Meinung nach besser, die Card-Komponente beizubehalten.

Nützliche Artikel: Dan Abramov, der Redux Schöpfer: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.kyc0tpd11