反应::标签
呈现选项卡式菜单和视图组件。
定义一个 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