React父组件如何拆分并单独渲染子组件返回的多个元素？

你的核心问题在于：父组件Indice无法直接访问子组件FakeItem内部返回的JSX内容——props.children是<FakeItem>这个React元素实例，而非组件的输出结果。要实现拆分渲染，需要调整组件的交互方式，推荐两种常用方案：

方案一：使用Render Props模式 #

让FakeItem接收一个render函数，将标题和内容元素传递给父组件，由父组件决定渲染位置：

import { useId } from "react";

function FakeItem({ title, content, render }) {
  const id = useId();
  // 把生成的标题、内容元素传给render函数
  return render({
    titleElement: <a href={"#" + id}>{title}</a>,
    contentElement: <div id={id}>{content}</div>
  });
}

function Indice({ children }) {
  // 调用传入的函数，拿到拆分后的两个元素
  const { titleElement, contentElement } = children();
  
  return (
    <>
      <div className="titulos">{titleElement}</div>
      <div className="conteudos">{contentElement}</div>
    </>
  );
}

export default function App() {
  return (
    <Indice>
      {() => (
        <FakeItem 
          title="Intro" 
          content="Once upon a time..." 
          render={({ titleElement, contentElement }) => ({ titleElement, contentElement })}
        />
      )}
    </Indice>
  );
}

方案二：拆分组件+Context共享ID #

把FakeItem拆分为标题、内容两个独立组件，通过Context共享生成的ID，保证锚点关联正常：

import { useId, createContext, useContext } from "react";

// 创建Context用于传递ID
const ItemIdContext = createContext(null);

// 标题组件
function FakeItemTitle({ title }) {
  const id = useContext(ItemIdContext);
  return <a href={"#" + id}>{title}</a>;
}

// 内容组件
function FakeItemContent({ content }) {
  const id = useContext(ItemIdContext);
  return <div id={id}>{content}</div>;
}

// 组合组件，负责生成ID并提供Context
function FakeItem({ title, content, children }) {
  const id = useId();
  return (
    <ItemIdContext.Provider value={id}>
      {children({
        Title: <FakeItemTitle title={title} />,
        Content: <FakeItemContent content={content} />
      })}
    </ItemIdContext.Provider>
  );
}

function Indice({ children }) {
  const { Title, Content } = children();
  return (
    <>
      <div className="titulos">{Title}</div>
      <div className="conteudos">{Content}</div>
    </>
  );
}

export default function App() {
  return (
    <Indice>
      {() => (
        <FakeItem title="Intro" content="Once upon a time...">
          {({ Title, Content }) => ({ Title, Content })}
        </FakeItem>
      )}
    </Indice>
  );
}

为什么原代码行不通？ #

原代码中props.children是<FakeItem>这个React元素对象，而非组件执行后返回的JSX数组。React组件的内部输出是封装的，父组件不能直接通过索引访问子组件的返回内容，必须通过组件间的约定（如Render Props、Context）来传递需要的部分。

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