Es6 Reacts to components

Question

React with ES6を使用してコンポーネントへの参照を取得するにはどうすればよいですか？

私はコンポーネントA

class ComponentA extends React.Component { 
    doSomethingInComponentA() { 
     //do Something here.. 
    } 
} 
render(<ComponentA />, document.getElementById('container')); 

を持っていると私はComponentAのメソッドを呼び出したい別のコンポーネントB

class ComponentB extends React.Component { 
    doSomethingInComponentB() { 
     ComponentAInstance.doSomethingInComponentA() 
    } 
} 

がどのように私はComponentAへの参照を取得できますか？ 私は

var ComponentAInstance = render (<ComponentA />, 
document.getElementById('container')) 
export default ComponentAInstance; 

を使用して試してみました。しかし、私はWebPACKのとComponentA.jsxを使用しておりますので、私はエラーに

Module not found: Error: a dependency to an entry point is not allowed 

を取得し、私のエントリポイントは、このための任意の回避策はありますか？

Answer 1

Reactは、主に一方向のデータフローでアプリケーションを構築することを推奨します。 <ComponentB />が<ComponentA />の直接の子であれば、データ（および関数）を小道具を使って渡すことができます。 <ComponentB />が<ComponentA />の親である、またはそれに直接接続されていない場合

function ComponentA() { 
    const doSomething =() => console.log('I did something'); 

    return (
    <ComponentB onClick={doSomething} /> 
); 
} 

function ComponentB(props) { 
    return (
    <button onClick={props.onClick}>Example<button> 
); 
} 

はしかし、その後、コンポーネントが通信できるようにするためにイベント/状態管理システムを導入する必要があります。

この問題を解決する最も一般的なパターンはFluxと呼ばれ、最も普及しているFluxの実装はReduxです。

Reduxのようなライブラリを使用すると、コンポーネントは中央ストアの状態を変更するアクションをディスパッチします。アプリケーションの他のコンポーネントは、ストア内の変更をリッスンし、それに応じて応答することができます。

場合によっては、doSomethingInComponentBメソッドを使用して、ストアを変更するアクションをディスパッチする必要があります。 <ComponentA />は、適切な状態が変更された後に変更をサブスクライブし、そのdoSomethingInComponentAメソッドを呼び出す必要があります。