React で Props を this.props.children に効率的に渡すにはどうすればよいですか?

{this.props.children} にプロパティを渡す方法

はじめに

React では、ラッパー コンポーネントを使用して、子コンポーネントのグループをカプセル化し、それらにいくつかの共通プロパティを渡します。

新しいプロパティを使用して子のクローンを作成する

1 つのアプローチは、React を使用することです。子を反復処理し、React.cloneElement を使用して新しい props で各要素のクローンを作成します。ただし、コードが脆弱になる可能性があるため、この方法はお勧めできません。

<br>const Child = ({ childName,sayHello }) => (<br> <button onClick={() =>sayHello(childName)}>{childName}</button><br>);</p>
<p>function Parent({ Children }) {<br>関数sayHello(子供名) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(`Hello from ${childName} the child`);

ログイン後にコピー

}

const ChildrenWithProps = React.Children.map(children, child => {

if (React.isValidElement(child)) {
  return React.cloneElement(child, { sayHello });
}
return child;

});

戻る

{childrenWithProps}

;
}

function App() {
// 型安全性は低いが、より単純な代替
return (

<Parent>
  <Child childName="Billy" />
  <Child childName="Bob" />
</Parent>

);
}

ReactDOM.render(, document.getElementById("container"));

クローン作成の代替手段Children

プロパティを子に渡す場合は、次の代替案を検討してください:

• 状態のホイスティング: 共有プロパティを親コンポーネントの状態に移動します。そしてそれらを props 経由で渡します。
• Context API: 階層関係に関係なく、コンポーネント間でデータを共有する Context オブジェクトを作成します。
• Render Props: ラッパー コンポーネントでレンダー プロップを定義し、子に渡します。プロパティを入力として受け取る関数としてのコンポーネント。

以上がReact で Props を this.props.children に効率的に渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。