React中如何实现双挂载点的Tabs组件？（转指定HTML结构）

你要的需求完全可以在React中实现，核心思路是利用父组件（Tabs）遍历并处理子组件（Tab）的内容，把每个Tab的头部和内容分别提取后，渲染到对应的容器里。

实现代码 #

首先实现Tab组件——它不需要自己渲染任何内容，只作为数据载体传递头部和内容信息：

function Tab({ head, children }) {
  // 仅作为数据传递，实际渲染由Tabs组件处理
  return null;
}

然后实现Tabs组件，它会收集所有子Tab的信息，分别渲染头部容器和内容容器：

function Tabs({ children }) {
  // 遍历子组件，提取每个Tab的头部和内容数据
  const tabsData = React.Children.map(children, (child) => {
    if (child.type === Tab) {
      return {
        head: child.props.head,
        body: child.props.children
      };
    }
    return null;
  }).filter(Boolean); // 过滤掉非Tab类型的子组件

  return (
    <>
      <div className="heads">
        {tabsData.map((tab, index) => (
          <div key={index} className="head">
            {tab.head}
          </div>
        ))}
      </div>
      <div className="bodies">
        {tabsData.map((tab, index) => (
          <div key={index} className="body">
            {tab.body}
          </div>
        ))}
      </div>
    </>
  );
}

使用方式 #

完全按照你期望的结构调用即可：

<Tabs>
  <Tab head="head1">body1</Tab>
  <Tab head="head2">body2</Tab>
  <Tab head="head3">body3</Tab>
</Tabs>

原理说明 #

React允许父组件通过React.Children API访问和处理子组件，Tabs组件就是通过遍历所有子Tab，把每个Tab的head属性和子内容（body）收集起来，然后分别渲染到.heads和.bodies容器中，最终生成你需要的HTML结构，同时每个head-body对在逻辑上还是属于同一个Tab组件，完全符合你的需求。

内容的提问来源于stack exchange，提问作者gog