2

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

私はコンポーネント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

これに対する回避策はありますか?

4

1 に答える 1

3

React では、主に一方向のデータ フローでアプリケーションを構築することをお勧めします。<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>
  );
}

ただし、<ComponentB />が の親で<ComponentA />あるか、直接接続されていない場合は、イベント/状態管理システムを導入して、コンポーネントが通信できるようにする必要があります。

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

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

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

于 2016-05-09T14:30:36.847 に答える