親反応成分から子反応成分のデータにアクセスする方法

Question

ReactJSを初めて使用しました。私は、Reactコンポーネントのいくつかのプロパティを設定し、親のReactコンポーネントからそのコンポーネントにアクセスできるようにしたいと考えています。しかし、私はこれを行う方法が完全にはわかりません。たとえば、次の2つのクラスを考えてみます。

export default class SubWindow extends React.Component { 

    click(event) 
    { 
     this.myCollection.push({name:'receiptNum',value:$(event.currentTarget).html()}); 
    } 

    render() 
    { 
     return (
     <ul> 
      <li onClick={this.click.bind(this)}>0</li> 
      <li onClick={this.click.bind(this)}>1</li> 
      <li onClick={this.click.bind(this)}>2</li> 
      <li onClick={this.click.bind(this)}>3</li> 
     </ul> 
     ); 

    } 

} 



export default class MainWindow extends React.Component { 

    click(event) 
    { 
     console.log(SubWindow.myCollection); 
    } 

    render() 
    { 
     const SubWindow = require('./SubWindow').default; 
     return (
      <SubWindow /> 
      <button onClick={this.click}>Log subwindow array</button> 
     ); 

    } 

} 

は基本的に、私はサブウィンドウがJSONオブジェクトの配列だけでmyCollectionと呼ばれる性質を持っていると思います。 myCollectionは、リスト項目をクリックするたびに入力されます。

その後、私は親ウィンドウのボタンを押したときにconsole.log(SubWindow.myCollection)になりたいと思います。 私の質問親反応成分からSubWindow.myCollectionにアクセスするにはどうしたらいいですか？

Answer 1

この問題を解決するには、コールバックを使用することをお勧めします。 MainWindowはSubWindowを作成しており、ここではプロパティとしてコールバック関数を与えることができます。例えば：あなたのSubWindowクラスで今

<SubWindow onClick={this.onSubwindowClick} /> 

は、ちょうどあなたのclick関数の中で、このコールバックを呼び出します。

click(event) 
    { 
     this.myCollection.push({name:'receiptNum',value:$(event.currentTarget).html()}); 
     this.props.onClick(/* data you want to pass to the parent */); 
    } 

はまた、あなたはクラスMainWindowでonSubwindowClickを定義する必要があります。この関数は子クラスからのデータを受け取るべきです - 私がコメント/* data you want to pass to the parent */を置いた子から渡したデータ。

また、thisをそのonSubwindowClickの機能にバインドすることを忘れないでください。これは通常クラスのconstructorで行われます。これは各コンポーネントの作成をお勧めします。

Reactのページで「親にデータを渡す」という良い例があります。記事Thinking in React、特に「ステップ5：逆データフローの追加」のセクションをご覧ください。

Answer 2

あなたの子コンポーネントに関数を渡すだけで、関数は親コンポーネントの 'this'にバインドされますが、実際にはクロージャを作成しました。

親コンポーネントでは、関数のargsが子コンポーネントで渡されますが、親コンポーネントのスコープはargsにアクセスできるため、親スコープでは子スコープのデータにアクセスできます。