React 디자인 패턴: 복합 구성 요소

Ce 디자인 패턴 est assez simple à mettre en place: on a un component parent qui a des components enfants et ils sont reliés par un context.

Ce qu'on voit généralement en production, c'est un component parent avec des enfants à qui on passe des props.
Ici, l'approche est différente, c'est un component qui est découpé en plusieurs 옵션:

<PreviewModal>
  <PreviewModal.Player />
  <PreviewModal.Info />
  <PreviewModal.Episode />
</PreviewModal>

예를 들어, 구성 요소에서 PreviewModal qui mets à disposition plusieurs 옵션: le player, les infos, les épisodes.
미리보기 모드에서 고유한 글꼴 부분의 옵션을 선택하면 문맥에 따라 달라지는 부분이 있습니다.

구현:

1단계: 컨텍스트 생성

const ModalContext = React.createContext(defaultContext);

Pour l' example, j'ai mis en place la forme la plus basique du context, pas de provider value.

2단계: 상위 구성 요소 생성

const PreviewModal = ({ children }) => {
  return (
    <>
      <p>Preview Modal like Netflix</p>
      {children}
    </>
  );
};

3단계: Connexion des enfants avec le parent

const { episodes } = useContext(ModalContext);

보너스:

PreviewModal.Player = Player;
PreviewModal.Info = Info;
PreviewModal.Episode = Episode;

La petite astuce, PreviewModal est un objet js donc on peut lui faire stocker les components.
Je trouve qu'écrire le code de cette manière ça permet de mieux comprendre que la component parent à des "options"