React 中的选项卡式内容答案

【问题标题】：Tabbed content in ReactReact 中的选项卡式内容
【发布时间】：2021-08-01 06:59:53
【问题描述】：

有很多在线代码示例，您可以在其中构建标签，例如：

<Container>
  <Tab title="Tab A">
    {"Tab A content"}
  </Tab>
  <Tab title="Tab A">
    {"Tab B content"}
  </Tab>
</Container>

这适用于简单的用例。你可以想象Container 是这样实现的：

const Tab = (props) => (
  <div>{props.title}</div>
) 
const Container = (props) => {
 const items = props.children
 const selectedContent = props.children[props.selectedIdx].children
 return (
   <div>
    {items}
    {selectedContent}
   </div>
 ) 
}

const App = () => {
  const [idx, selectedIdx] = React.useState(0)
  return (
    ... the previous code blox 
  )
}

但是假设我们想让我们的标签更复杂一点。每个选项卡都有不同的网络请求，并且选项卡标题可能会根据网络请求的输出而有所不同。而不是在这个父组件中拥有所有数据获取逻辑，我想要这样的东西：

<Container>
 <TabOneWithDataFetching/> 
 {....}
 <TabNWithDataFetching/>
</Container>

const TabOneWithDataFetching = () => {
 const content = // make network request
 const title = // make network request
 return <Tab title={title}>{content}</Tab>
}

然而，当我做这样的事情时，似乎很难渲染来自Container 组件的选定内容。我不能再做props.children[index].children 并且打字也变得一团糟。我不正确地接近这个吗？这是对组件和模块化的错误思考方式吗？

【问题讨论】：

使用 react-router 可能会更容易。
我想知道Container 真正在这里做什么工作。我想您真正需要的只是某种切换组件来控制选项卡之间的流，您可以通过路由库将其绑定到 URL，但如果不自己进行路由也不难实现（一些有用的示例在this thread)。访问props.children[index].children 绝对不是要走的路。

标签： javascript reactjs

【解决方案1】：

我认为你很接近，React 非常关注组件的状态管理。如果您使用的是引导程序，您可以查看React Bootstraps' Tab implementation。

也许一些非引导库可用于选项卡式内容。

【讨论】：