Render-as-children Sample

Child Componentを一緒にレンダリングするパターン

Child Component

import { useState } from "react";

const Child = () => {
  return <div>Child Component</div>;
};

export const Container = () => {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <div>
        <button onClick={() => setOpen(!open)}>
          {open ? "Close" : "Open"}
        </button>

        {open && <div>ここにメニューが表示されます</div>}
      </div>

      <div>
        <div>
          <Child />
        </div>
      </div>
    </div>
  );
};

Child Componentをpropsで渡すパターン

Child Component

import { useState } from "react";

const Child = () => {
  return <div>Child Component</div>;
};

interface ContainerProps {
  children: React.ReactNode;
}

const Container = ({ children }: ContainerProps) => {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <div>
        <button onClick={() => setOpen(!open)}>
          {open ? "Close" : "Open"}
        </button>
        {open && <div>ここにメニューが表示されます</div>}
      </div>
      <div>{children}</div>
    </div>
  );
};

export const ContainerWithChild = () => {
  return (
    <Container>
      <Child />
    </Container>
  );
};