1.合成とその使用

反応器には,素子間でコードを再利用できる合成モデルが存在する.小さな積み木(素子)をユーザインタフェースにまとめることもできます.
具体的には、インタフェースのボックスまたはShellコンポーネントを作成してWrapperコンポーネントとし、サブエレメントの出力を維持するのに役立つ、コンポーネントを作成するための汎用UI要素、すなわちborder-radius、box-shadowなどがある.
例えば、以下の画像では、(1)サブエレメントおよび(2)サブエレメントに共通するCSSエレメントborder-radius、box-shadowをそれぞれCardという名前のエレメントとして作成し、使用するエレメントファイルにインポートする.
Web開発分野でCard用語を使用すると、箱のように見えることを意味します.
Card.jsコンポーネント

import './Card.css';

function Card(props) {
  return <div className="card"></div>;
}

export default Card;

Card.css

.card {
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

変更前(2)ExpenseItem.jsコンポーネント

import ExpenseDate from './ExpenseDate';
import Card from './Card';
import './ExpenseItem.css';

function ExpenseItem(props) {
  return (
    <div className="expense-item">
      <ExpenseDate date={props.date} />
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;

変更後(2)ExpenseItem.jsコンポーネント

import ExpenseDate from './ExpenseDate';
import Card from './Card';
import './ExpenseItem.css';

function ExpenseItem(props) {
  return (
    <Card className="expense-item"> // <Card> 로 변경됨
      <ExpenseDate date={props.date} />
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </Card> // </Card> 로 변경됨
  );
}

export default ExpenseItem;

上記のファイルで<div>ではなく<Card>というWrapperコンポーネントを使用すると、画面に出力されるすべての要素が消えます.これは、クライアントコンポーネントCard.jsが他のコンテンツのWrapperとして使用できないためである.また、open tagとclosting tagの間にコンテンツがある場合は、それらは動作しません.
では、この問題を解決する方法がまったくないわけではありません.反応には方法がある.props.childrenを使用します.

2. props.children

すべての素子で得られる特殊な支柱は反応器に構築されている.それはprops.childrenである.これは、opengtagとclostingtagの間のすべてのコンテンツを他のコンポーネントから受信する方法であり、カスタムコンポーネント(Card.js)が他のコンポーネントでwrapperとして使用されることを可能にする.
Card.jsコンポーネント
Card.jsに{props.children}が記述されている場合、任意のサブアイテムは、他のコンポーネントにJSXを重畳することによって伝達され得る.
また、Card.jsのclassNameをconst classes = 'card ' + props.classNameとして記述することにより、共通アプリケーションのために個別に分離されたUI要素と、Wrapperコンポーネント(ExpenseItem.js)のclassNameとを画面に一緒に適用することができる.
ExpenseItem.jsコンポーネント
<Card> JSXタグの中のものはCardセットのサブアイテムに渡されます.Card {props.children}を<div>にレンダリングし、最終的に渡されたイラストを出力します.
これらの操作により,HTMLコードを抽出したり,divのJSXコードを抽出したりすることができる.コードを抽出およびコピーして、他のコンポーネントを清潔に保つことができます.すなわち、CardをWrapperとして構成し、構築したHTML要素を用いて構成することができる.
すべての要素と要素が一緒に集合し、ExpenseItem要素全体を形成し、ユーザインタフェースを作成する.
要するに、「合成」(Composition)では、Wrapper素子の作成に役立つprops.childrenが重要です.
Udemy講義
React公式文書