React로 만드는 탭

React로 만드는 이해하기 쉬운 탭의 템플리가 Qiita에 두고 있으면 생각하고 썼습니다.
설명 없이 코드를 올려 놓습니다. 여기 의 기사를 보고 썼으므로 자세한 것은 분명히 참조해 주세요!

환경

react 17.0.1

다음 10.0.5

typescript 4.1.3

완성은 이런 느낌

구성 설명

index.tsx (탭을 표시하면)

Tabs.tsx

TabTitle.tsx

Tab.tsx

Tabs.tsx

Tabs.tsx

import React, { ReactElement, useState } from 'react';
import TabTitle from './TabTitle';

type Props = {
  children: ReactElement[];
};

const Tabs: React.FC<Props> = ({ children }) => {
  const [selectedTab, setSelectedTab] = useState(0);

  return (
    <div>
      <ul>
        {children.map((item, index) => (
          <TabTitle
            key={index}
            title={item.props.title}
            index={index}
            setSelectedTab={setSelectedTab}
          />
        ))}
      </ul>
      {children[selectedTab]}
    </div>
  );
};

export default Tabs;

TabTitle.tsx

TabTitle.tsx

import React, { useCallback } from 'react';

type Props = {
  title: string;
  index: number;
  setSelectedTab: (index: number) => void;
};

const TabTitle: React.FC<Props> = ({ title, index, setSelectedTab }) => {
  const onClick = useCallback(() => {
    setSelectedTab(index);
  }, [setSelectedTab, index]);

  return (
    <li>
      <button onClick={onClick}>{title}</button>
    </li>
  );
};

export default TabTitle;

Tab.tsx

Tab.tsx

import React from 'react';

type Props = {
  title: string;
};

const Tab: React.FC<Props> = ({ children }) => {
  return <div>{children}</div>;
};

export default Tab;

index.tsx

index.tsx

import React from 'react';
import Tab from '../components/Tabs/Tab';
import Tabs from '../components/Tabs/Tabs';

const index: React.FC = () => {
  return (
    <Tabs>
      <Tab title='Lemon'>Lemon is yellow</Tab>
      <Tab title='Strawberry'>Strawberry is red</Tab>
      <Tab title='Pear'>Pear is green</Tab>
    </Tabs>
  );
};

export default index;