React 30 秒速学：制作选项卡组件

本文译自： 30-seconds-of-react 。 React 30 秒速学： 精选有用的 React 片段，30-seconds-of-react 的中文版本，已全部完成翻译、上线，地址： 30-seconds-of-react-zh_CN-umi 。

选项卡组件。

• 定义一个 TabItem 组件，将它传递给 Tab 并通过在 props.children 中识别函数的名称来删除除了 TabItem 外的不必要的节点。
• 使用 React.useState() hook 将 bindIndex 状态变量的值初始化为 props.defaultIndex 。
• 使用 Array.prototype.map 来渲染 tab-menu 和 tab-view 。
• 定义 changeTab ，用于 tab-menu 单击 <button> 时执行。
• 这导致根据他们的 index 反过来重新渲染 tab-view 项的 style 和 className 以及 tab-menu 。
• changeTab 执行传递的回调函数 onTabClick ，并更新 bindIndex ，这会导致重新渲染，根据它们的 index 改变 tab-view 项目和 tab-menu 按钮的 style 和 className 。

.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;
}
复制代码

import styles from "./Tabs.css";

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.name);

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

例子

export default function() {
  return (
    <Tabs defaultIndex="1" onTabClick={console.log}>
      <TabItem label="A" index="1">
        A 选修卡的内容
      </TabItem>
      <TabItem label="B" index="2">
        B 选修卡的内容
      </TabItem>
    </Tabs>
  );
}
复制代码