ホームページ > ウェブフロントエンド > jsチュートリアル > React で Props を「this.props.children」に効果的に渡すにはどうすればよいですか?

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

Patricia Arquette
リリース: 2024-12-20 05:22:13
オリジナル
960 人が閲覧しました

How to Effectively Pass Props to `this.props.children` in React?

{this.props.children} に props を渡す方法

この質問の目的は、ラッパー内のすべての子に props を渡す適切な方法を明確にすることです。レンダリングに {this.props.children} を利用するコンポーネント。

New を使用して子のクローンを作成するProps

1 つのアプローチには、React.Children の使用が含まれます。これは、各子要素を反復処理し、React.cloneElement を通じて新しい props でそれらのクローンを作成します。ただし、コードが脆弱になる可能性があるため、この方法は一般的に推奨されません。

例として、次のコードを考えてみましょう。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

const Child = ({ childName, sayHello }) => (

  <button onClick={() => sayHello(childName)}>{childName}</button>

);

 

function Parent({ children }) {

  // This `sayHello` function is passed down to child elements.

  function sayHello(childName) {

    console.log(`Hello from ${childName} the child`);

  }

 

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

    // `React.isValidElement` ensures the child is a valid React element.

    if (React.isValidElement(child)) {

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

    }

    return child;

  });

 

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

}

ログイン後にコピー

このアプローチでは、子に props を渡すことができますが、次の代替方法と比べて、型安全性が低く、読みにくい可能性があります:

1

2

3

4

5

6

7

8

9

function Parent({ children }) {

  // This `sayHello` function is passed down to child elements.

  function sayHello(childName) {

    console.log(`Hello from ${childName} the child`);

  }

 

  // Directly passing props to children.

  return <div>{children(sayHello)}</div>;

}

ログイン後にコピー

この後者のアプローチは、より明示的に意図を伝えます。子供にプロップを渡し、タイプ セーフティを維持します。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート