React の子供に props を渡す

1. React で子供たちに props を渡す
2. React で Context API を使って子供に props を渡す
3. React で React.cloneElement() を使用して子供に props を渡す

React 開発者は、コンポーネントの再利用性に依存して、強力でありながら保守可能なアプリケーションを構築します。

React ライブラリは、再利用可能なコンポーネントを利用する柔軟性を追加する構成モデルを備えています。状況によっては、コンポーネントの子がどうなるかを予測できない場合があります。

たとえば、メッセージングアプリを作成する場合、ダイアログボックスに絵文字とテキストが含まれる場合があります。

React は、コンポーネントの再利用性を高めるための props.children 機能を提供します。簡単に言うと、React 開発者は、this.props.children を使用して、親コンポーネントの開始タグと終了タグの間に配置された値（通常は UI 要素）を表示できます。

React で子供たちに props を渡す

props.children を通じて受け取る子要素があると想像してみましょう。それらを表示するには、return ステートメントに props.children または this.props.children（クラスコンポーネントの場合）を含める必要があります。

これは、3つのコンポーネントの例です。上部にある親コンポーネント App と、子 Text コンポーネントを持つ Box コンポーネントです。見てみましょう：

class App extends Component {
  render() {
    return <Box>
            <Text></Text>
           </Box>;
  }
}

class Box extends Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}
class Text extends Component {
  render() {
    return <p>Welcome to App</p>;
  }
}

しかし、props.children に含まれる要素またはコンポーネントに追加の props を渡す必要がある場合はどうなりますか？この例では、テキストに color または fontSize プロパティを指定する必要がある場合があります。

これを行うための 2つの優れたオプションを調べてみましょう。

React で Context API を使って子供に props を渡す

Context を使用すると、コンポーネントのツリー全体に props を渡すことができます。上部に App コンポーネントがあるが、ツリーの下部にある子コンポーネントにイベントハンドラーを渡したいので、これは非常に便利です。

手動で渡すこともできますが、時間がかかり、追跡が困難になります。代わりに、Context を使用して、すべての子コンポーネントで値を使用できるようにすることができます。

技術的には、Context は props と同じではありませんが、私たちの状況で仕事を成し遂げます。これを行うには、すべての React アプリケーションで使用できる React.createContext() メソッドを使用します。

まず、Context インスタンスを格納する変数を定義します。

import React, { Component } from 'react';
import { render } from 'react-dom';
const SampleContext = React.createContext()
class App extends Component {
  render() {
    return <Box>
            <Text></Text>
           </Box>;
  }
}

変数はクラスコンポーネントのスコープ外で作成されることに注意してください。

this.props.children を表示するコンポーネントを見つけて、<SampleContext.Provider> でラップします。ラッパーの開始タグと終了タグの間にあるものはすべて、定義した値にアクセスできます。

次に、値を指定します。

class Box extends Component {
  render() {
    return <SampleContext.Provider value={{color: "red"}}>
          {this.props.children}
          </SampleContext.Provider>;
  }
}

次に、this.props.children のように渡されるコンポーネントに移動し、contextType プロパティを最初に作成した変数と同じに設定します。

class Text extends Component {
  static contextType = SampleContext
  render() {
    return <p style={{color: this.context.color}}>Welcome to App</p>;
  }
}

これを行うと、Context から値にアクセスできます。この場合、インラインスタイルオブジェクトを定義し、color プロパティを this.context.color、red に設定します。

プレイコードに見られるように、テキストは確かに赤です。Context でプロパティを追加または削除して、コードが機能するかどうかを確認することで、コードを自分で編集してみることができます。

React で React.cloneElement() を使用して子供に props を渡す

または、cloneElement() メソッドを使用して、props.children の要素またはコンポーネントにカスタムプロップを追加することもできます。例を見て、要約してみましょう。

<>{React.cloneElement(props.children, {color: "red"})}</>

この例では、メソッドは 2つの引数を取ります。まず、props.children を渡す必要があります。これは、クローン作成の開始点として使用されます。これは、複製された要素が元の要素のすべてのpropsを持つことを意味します。

cloneElement() メソッドは、DOM と対話するときに重要な参照も保持します。

2 番目の引数として、コンポーネントに受信させたいすべての追加の props を渡す必要があります。この場合、値が"red"の color プロップを渡します。