ネストされたReactComponentの状態変更を扱う

Question

したがって、私は複数のReactComponentを持っています。最初は、親コンポーネントの一種（そのGrandPaを自分の状態と呼ぶ）があり、その状態に関する情報を別のコンポーネント（親と呼ぶ）に渡すと思っていました。同様に、Parentは彼の子供の一部をGrandChildに渡します。だから我々は、階層構造をしている：

おじいちゃん - しかし、私はすぐに私は方法this.setState(prevState => (<new state based on prevState>))とおじいちゃんの状態を変更すると、変更はチャンネルを下にカスケードしていないことに気づき>孫

- >親 - >子。私が気づいた別の問題は、チャンネルの変更を渡すことです。私はこれを行う良い方法を見つけていない。 （以前は、いくつかのイベントをDOMのコンポーネントにバインドし、ReactComponentのすべてからアクセス可能なパブリック変数を持つことで、非常にスケッチをとっていました）誰かが特定のイベントをトリガーすると、それぞれの構成要素...長い話は短いので、これは多くの問題を引き起こし、醜いものでした。）

したがって、私は親と子だけでこれをしようとしたところで、以下のサンプルコードを持っています。これはダミーの例ですが、これを行う方法を学ぶだけです。 ReactRandomという親は、状態が{name: <name>}であり、その名前をランダムな文字列に変更するメソッドがあります。 ReactRandomがレンダリングされると、別のコンポーネントReactRandomNestedからその名前がレンダリングされ、基本的にそれ自身の小道具を介して渡された名前が表示されます。ここでは、私はReactRandomNestedのメソッドを作成しました。明示的に変更をレンダリングしています（これは私が望むものではありません、チャンネルの下で更新をカスケードする方法があると思っています。私たちは2つ以上のネストされたレベルを持っています）。しかし、これでも動作しません。これは1ステップの遅延を有し、現在のタイムステップで前の更新をレンダリングする。

とにかく、ここで私が現在持っているコードです：ところで

class RandomReactNested extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {name: props.name}; 
    } 

    handleChange() { 
     let self = this; 
     self.setState({name: self.props.name}); 
    } 

    render() { 
     let self = this; 
     return React.createElement("span", { 
      onClick:() => self.handleChange.call(this) 
     }, self.state.name); 
    } 
} 

class RandomReact extends React.Component { 
    constructor (props){ 
     super(props); 
     this.state = {name: props.name}; 
     this.changeName.bind(this); 
    } 

    changeName() { 
     let random_word_length = Math.round(Math.random()*20), 
      index_count = 0, 
      new_name = "", 
      alphabet = "abcdefghijklmnopqrstuvwxyz"; 
     for (index_count; index_count <= random_word_length; index_count += 1) { 
      new_name += `${alphabet[Math.round(Math.random()*random_word_length)]}`; 
     } 
     console.log(new_name); 

     this.setState(prevState => ({ 
      name: new_name 
     })); 
    } 

    render() { 
     let self = this; 
     return React.createElement("div", { 
      key: 2, 
      onClick:() => (this.changeName.call(self)) 
     }, 
      React.createElement(RandomReactNested, { 
       name: self.state.name 
      })); 
    } 
} 

、私は反応するように、非常に新しいですし、これを効果的に使用する方法を学習しようとしています。 、

「だから、何についての継承 のFacebookで：私も、これに対してアドバイスを思わページ（https://reactjs.org/docs/composition-vs-inheritance.html）の端部に向かってReactJSのウェブサイトからこれを見た（しかし、私は完全にわかりません？）？私たちは何千ものコンポーネントでReactを使用していますが、コンポーネント継承階層を作成することをお勧めするユースケースは見つかりませんでした。 小道具とコンポジションは、明示的かつ安全な方法でコンポーネントの外観と動作をカスタマイズするために必要な柔軟性を提供します。 コンポーネント間でUI以外の機能を再利用する場合は、別のJavaScriptモジュールにそれを抽出することをお勧めしますコンポーネントはそれをインポートし、その関数、オブジェクト、またはクラスを拡張せずに使用することができます。

Answer 1

とにかく咳、Reduxの、咳

は、小道具を渡すと一方通行の通りです！物事を渡して使用することはできますが、それらを渡すことはできません。親コンポーネントを操作する唯一の方法は、関数全体を小道具として渡すことです。

updateGrandpaState(newData){ 
this.setState({ originalData: newData}) 
} 

あなたのおじいちゃんのコンポーネントから、あなたはこのように伝えます。

<ParentComponent updateGrandpaState={this.updateGrandpaState} /> 

そして、あなたの親コンポーネント内で、あなたはその後、これgrandpaComponent状態を更新、grandpaComponentに住んでいる元の関数を起動します

this.props.updateGrandpaState(parentComponentData) 

を呼び出すことができます。事前警告

そして、はい、あなたはさらに行くことができますが、より深いあなたはそれが...親

< ChildComponent updateGrandpaState={this.props.updateGrandpaState} /> 

インサイド子供

インサイド

インサイドおじいちゃん

< ParentComponent updateGrandpaState={this.updateGrandpaState} /> 

を取得醜い行きます

this.props.updateGrandpaState(childComponentData) 

あなたが2つのレベルを深くすると、私はまた、dev作業をしている間にcomponentDidMountのconsole.log（this.props）を実行します。

ものでもクーラーにするために、あなたも

<ParentComponent grandpaState={this.state} updateGrandpaState={this.updateGrandpaState} /> 

.....あなたはcomponentWillRecievePropsにフックアップ可能性がある、使用するには、下のparentComponentにgrandpaStateを渡すことができますしかし、あなたはReduxの学びたら正直に、それを設定します数回、それは本当に素晴らしいですし、私はそれを使用することはありません！