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

本文同时发布于掘金,地址:https://juejin.im/post/6844903858527797262

本文译自: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-menutab-view
  • 定义 changeTab ,用于 tab-menu 单击 <button> 时执行。
  • 这导致根据他们的index 反过来重新渲染 tab-view项的styleclassName以及tab-menu
  • changeTab 执行传递的回调函数 onTabClick ,并更新 bindIndex ,这会导致重新渲染,根据它们的 index 改变 tab-view 项目和 tab-menu 按钮的 styleclassName
.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>
  );
}
本文收录于专栏
译自:30-seconds-of-react 项目,全篇中文翻译、学习,所有案例进行分析、注释、上线。