Javascript React中的标签内容

有很多在线代码示例，您可以在其中构建选项卡，如：

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

但是我们想让我们的标签更复杂一点。每个选项卡都有各种网络请求，根据网络请求的输出，选项卡标题可能会有所不同。与此父组件中的所有数据获取逻辑不同，我希望如下所示：

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

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

{....}
const TabOneWithDataFetching=（）=>{
const content=//发出网络请求
const title=//发出网络请求
返回{content}
}

---

但是，当我这样做时，似乎会使从

容器

组件呈现所选内容变得非常困难。我不能再做

props.children[index].children

了，输入这个也变得一团糟。我是不是处理得不对？这是对组件和模块化的错误思考吗？

我想你很接近了，React非常关注组件的状态管理。如果您正在使用引导，您可以查看

---

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

使用react router可能会更容易。我想知道容器在这里到底做了什么工作。我想，您真正需要的是某种开关组件来控制选项卡之间的流，您可以通过路由库将其绑定到URL，但如果不亲自路由，就不难实现（中的一些有用示例）。访问

props.children[index].children

绝对不是一条好路。

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

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