Reactの状態と小道具を扱う適切な方法は何ですか

Question

私はしばらくの間Reactを使用していましたが、これを行うためにさまざまなアプローチを試しましたが、それらはすべて長所と短所があります。どちらが道のりです。 - フラックスストアをリッスンしている（スマート）親コンポーネント - 親コンポーネントがビューをレンダリングするだけでレンダリングされ、いくつかの「小さい（小さい）」子コンポーネントはレンダリングされません。内部ロジック "とは、例えば、入力値を更新するonChangeイベントなど、外部アクションによって処理される意味がないロジックです。

子コンポーネントに渡したいものを小道具として渡すだけで、その状態を乱さないでください。だから私は小道具を直接更新する必要があります（私はそれが直接小道具を更新することをお勧めしていないことを知っている）？小さなロジックが今の状態変数を使用していること

それとも

私は、何でも私は、子コンポーネントに渡すとしたい小道具getInitialStateに「それらを取得」を渡すのですか？

2番目のアプローチの問題は、実際に子コンポーネントからアクションを送信し、親コンポーネントがストア結果をリッスンして更新され、子コンポーネントをレンダリングするのが難しい場合です私はその鍵となる価値を変えます。私はこのようにしてはならないとも考えています。

最初のアプローチでも、私が言ったように、これを行うのが最善の方法だとは思わない、私は小道具を変更しています。子コンポーネントをレンダリングしても問題はありません親コンポーネントがリッスンしているストアを更新するアクションを送信します。

恐らくそれを行うには他の方法がありますが、確かに良い方法です。それが私が見たいものです。質問が混乱している場合は教えてください。私は他の方法で説明しようとします。

ありがとうございます！

Answer 1

メイン（親）コンポーネントからのみ状態を設定する必要があります。すべての子コンポーネントは "ダム"コンポーネントでなければなりません。子コンポーネントから状態を操作する必要がある場合は、親コンポーネントに必要な状態を変更する関数を用意し、その関数を子への小道具として渡します。子の状態を更新するために必要なアクションが完了したら、渡された関数を親コンポーネントで呼び出す親として呼び出し、それに従って状態を更新します。

以下は、私が何を話しているかについてのアイデアを提供する定型コードです。

例の子コンポーネント：

import React, {Component} from 'react'; 

    class Child extends Component { 

     edit =() => { 
      var state = "string"; 
      this.props.edit(state); 
     } 

handleChange = (evt) => { 
this.props.inputChange(evt.target.value); 

     render() { 
      return (
       <button type="button" onClick={this.props.edit}>Click Me!</button> 
<input type="text" name="name" onChange={this.handleChange}> 
      ) 
     } 
    } 

    export default Child; 

例の親コンポーネント：

import React, {Component} from 'react'; 
    import Child from './Child'; 

    class Parent extends Component { 

     edit = (val) => { 
      this.setState({data: val}) 
     } 

inputChange = (val) => { 
    this.setState ({input: val}); 
} 

     render() { 
      return (
       <Child edit={this.edit} inputChange={this.inputChange}> 
      ) 
     } 
    } 

    export default Parent;