反应::标签
呈现选项卡式菜单和视图组件。
定义一个 TabItem 组件，将其传递给，Tab 并TabItem 通过在中标识该函数的名称 来 删除不必要的节点 props.children。使用 挂钩将 状态变量的值初始化 为 。使用 收集到的节点上呈现 和 。定义 ，这将点击时要执行 从 。 执行传递的回调 并进行更新 ，这又将导致重新渲染， 并 根据项目和 按钮 的 和对其 进行 评估 。React.useState()bindIndexprops.defaultIndexArray.prototype.maptab-menutab-viewchangeTab
.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;
}function TabItem(props) {
return ;
}
function Tabs(props) {
const [bindIndex, setBindIndex] = React.useState(props.defaultIndex);
const changeTab = newIndex => {
if (typeofprops.onTabClick=== "function") props.onTabClick(newIndex);
setBindIndex(newIndex);
};
const items = props.children.filter(item => item.type.name === "TabItem");
return (
{items.map(({ props: { index, label } }) => (
))}
{items.map(({ props }) => (
))}
);
}ReactDOM.render(, document.getElementById("root") ); Lorem ipsum Dolor sit amet