React.jsで子コンポーネントから親コンポーネントにPropsを渡す方法は?

React.js で親コンポーネントに Props を渡す

React.js で親子関係を扱う場合、すぐに実行できない場合があります子コンポーネントの props を親に渡す方法は明らかです。ただし、イベントや複雑な構成に依存することを避ける簡単なアプローチがあります。

問題の特定

この問題は、子のプロップをその子プロパティに直接渡そうとするときに発生します。 onClick などのイベントを使用する親。イベントを通じて子のプロップにアクセスしようとすると、親がすでにそれらのプロップを所有していることを考えると、なぜそのようなアプローチが必要なのかという疑問が生じます。

よりシンプルなアプローチ

より合理化されたソリューションには、親がすでに子のプロップにアクセスできるという事実を利用し、それらを使用することが含まれます。直接:

// Child component
render() {
  return <button onClick={this.props.onClick}>{this.props.text}</button>;
}

// Parent component (with single child)
render() {
  return <Child onClick={this.handleChildClick} text={this.state.childText} />;
}

// Parent component (with list of children)
render() {
  const children = this.state.childrenData.map(childData => {
    return <Child onClick={this.handleChildClick.bind(null, childData)} text={childData.childText} />;
  });

  return <div>{children}</div>;
}

過剰結合の回避

onClick ハンドラーを介して子コンポーネント全体を親に渡すことを含むソリューションは、不必要な結合を引き起こすため、お勧めできません。そしてカプセル化を侵害します。代わりに、コンポーネント間の対話をそれぞれのインターフェイスに制限することが望ましいです。

以上がReact.jsで子コンポーネントから親コンポーネントにPropsを渡す方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。