Pure React로 간단한 탭 컴포넌트 만들기

순수한 React로 탭 메뉴와 뷰 컴포넌트를 만들어 봅시다.
TabItem 구성 요소를 정의하고 탭에 전달하고 TabItem에서 함수 이름을 식별하여 props.children에 대한 불필요한 노드를 제거합니다. React.useState() 후크를 사용하여 bindIndex 상태 변수의 값을 props.defaultIndex 로 초기화합니다.
그리고 수집된 노드에서 Array.prototype.map를 사용하여 tab-menu 및 tab-view를 렌더링합니다. Define changeTab , <button> 에서 tab-menu 를 클릭하면 실행됩니다. changeTab는 전달된 콜백onTabClick 및 업데이트bindIndex를 실행하여 다시 렌더링하여 tab-view 항목 및 탭 메뉴 버튼의 스타일과 클래스 이름을 인덱스에 따라 평가합니다.

/* App.css */
.tab-menu > button {
  cursor: pointer;
  padding: 8px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
}
.tab-menu > button.focus {
  border-bottom: 2px solid #007BEF;
}
.tab-menu > button:hover {
  border-bottom: 2px solid #007BEF;
}

// Tabs.jsx
function TabItem(props) {
  return <div {...props} />;
}

function Tabs(props) {
  const [bindIndex, setBindIndex] = React.useState(props.defaultIndex);
  const changeTab = newIndex => {
    if (typeof props.onTabClick === "function") props.onTabClick(newIndex);
    setBindIndex(newIndex);
  };
  const items = props.children.filter(item => item.type.name === "TabItem");

  return (
    <div className="wrapper">
      <div className="tab-menu">
        {items.map(({ props: { index, label } }) => (
          <button
            onClick={() => changeTab(index)}
            className={bindIndex === index ? "focus" : ""}
          >
            {label}
          </button>
        ))}
      </div>
      <div className="tab-view">
        {items.map(({ props }) => (
          <div
            {...props}
            className="tab-view_item"
            key={props.index}
            style={{ display: bindIndex === props.index ? "block" : "none" }}
          />
        ))}
      </div>
    </div>
  );
}

이제 탭 구성 요소를 사용하여 React 애플리케이션에서 렌더링할 수 있습니다.

ReactDOM.render(
  <Tabs defaultIndex="1" onTabClick={console.log}>
    <TabItem label="A" index="1">
      Lorem ipsum
    </TabItem>
    <TabItem label="B" index="2">
      Dolor sit amet
    </TabItem>
  </Tabs>,
  document.getElementById("root")
);

감사