contextaPI+styled-コンポーネントを使用して重複するコンポーネントを作成する

ContextAPIの最終リリースでは、ContextAPIのグローバル・ステータス(このプレゼンテーション)の管理だけでなく、再利用可能なコンポーネントの作成にも役立ちます.
CSS-IN JS関連のReactライブラリでは、最も人気のあるStyled ComponentとContextAPIを使用して再利用コンポーネントのYouTubeコンテンツを作成する方法をよく説明しており、これらのコンテンツを再記述したいと考えています.
サンプルコード

トップクラスコンポーネントApp.js

import React from "react";
import StupidAccordion from "../src/components/StupidAccordion";
import SmartAccordion, {
  SmartAccordionHeader,
  SmartAccordionBody
} from "../src/components/SmartAccordion";

export default function App() {
  return (
    <>
      <StupidAccordion />
      <SmartAccordion>
        <SmartAccordionHeader>I'm smart Accordion</SmartAccordionHeader>
        <SmartAccordionBody>Body</SmartAccordionBody>
      </SmartAccordion>
    </>
  );
}

ここで、StupidAccordion要素は、ContextAPIを使用して状態を管理しない汎用要素である.
では、SmartAccordionはContextAPI管理ステータスをどのように使用しますか?

SmartAccordion jsxファイルコード

重点内容は上図のスクリーンショットに記入します.SmartAccordionBody isopenの状態値に基づいて表示、非表示、決定されるため、以下のcssコードの内容が含まれる.

export const BodyWrapper = styled.div`
  height: 60px;
  padding: 10px;
  border: 1px solid #ffe6ee;
  display: ${({ isOpen }) => (isOpen ? "block" : "none")};
`;

サンプルの再使用

オルガンのタイトルテキストを置き換えるには、コンポーネントを再使用するか、コンポーネントのスタイルを変更したい場合があります.StupidAccordionの場合、この構成部品ファイルに直接アクセスして変更する必要があるため、再利用できません.SmartAccordionの場合、使用者は他の子を送るだけで簡単に変更や再利用ができます.

アコーディオンの再使用

import React from "react";
import StupidAccordion from "../src/components/StupidAccordion";
import SmartAccordion, {
  SmartAccordionHeader,
  SmartAccordionBody
} from "../src/components/SmartAccordion";

export default function App() {
  return (
    <>
      <StupidAccordion />
      <SmartAccordion>
        <SmartAccordionHeader>I'm smart Accordion</SmartAccordionHeader>
        <SmartAccordionBody>Body</SmartAccordionBody>
      </SmartAccordion>
      {/* 아래가 추가됨 */}
      <SmartAccordion>
        <SmartAccordionHeader>I'm smart Accordion222</SmartAccordionHeader>
        <SmartAccordionBody>Body</SmartAccordionBody>
      </SmartAccordion>
      
    </>
  );
}

スタイルの変更

import React from "react";
import styled from "styled-components"; //라이브러리 import 해야 함!!!
import StupidAccordion from "../src/components/StupidAccordion";
import SmartAccordion, {
  SmartAccordionHeader,
  SmartAccordionBody
} from "../src/components/SmartAccordion";

export default function App() {
  return (
    <>
      <StupidAccordion />
      <SmartAccordion>
        <SmartAccordionHeader>I'm smart Accordion</SmartAccordionHeader>
        <SmartAccordionBody>Body</SmartAccordionBody>
      </SmartAccordion>
      <SmartAccordion>
        <StyledSmartHeader>I'm smart Accordion222</StyledSmartHeader>
        <StyledSmartBody>Body</StyledSmartBody>
      </SmartAccordion>
    </>
  );
}
//아래 스타일 변경 내용이 추가 되어 위의 리턴파트에 반영됨
const StyledSmartHeader = styled(SmartAccordionHeader)`
  background-color: green; //
`;

const StyledSmartBody = styled(SmartAccordionBody)`
  border: 1px solid green;
`;

スタイル変更を追加すると、propsで受信したclassNameとしてコンポーネントが追加されます.(この部分は別に勉強する必要があります)

参考資料

https://youtu.be/5RhCxzmp2yw