React：如何向客户端组件传递多个服务端组件？

核心前提 #

React禁止客户端组件直接导入服务端组件，但服务端组件可以把其他服务端组件作为React节点（而非组件本身）传递给客户端组件，客户端组件只需处理这些节点即可，不需要导入服务端组件。

方法1：将children转为数组后按索引拆分 #

客户端组件可以通过React.Children.toArray()把children转为稳定数组，再按索引提取放置，避免单个子元素不是数组的问题：

// ClientComp.client.jsx
import { Children } from 'react';

export default function ClientComp({ children }) {
  const childArray = Children.toArray(children);
  return (
    <div>
      {/* 放置第一个服务端组件 */}
      {childArray[0]}
      <h1>Some other content in between</h1>
      <div>
        {/* 放置第二个服务端组件 */}
        {childArray[1]}
      </div>
    </div>
  );
}

// OuterServerComp.server.jsx
import ClientComp from "./ClientComp.client";
import ServerComp from "./ServerComp.server";

export default function OuterServerComp() {
  return (
    <ClientComp>
      <ServerComp />
      <ServerComp />
    </ClientComp>
  );
}

方法2：使用命名Props（推荐，更易维护） #

依赖索引的写法不够直观，一旦子元素顺序变化就会出错，推荐给客户端组件传递命名Props，精准控制每个服务端组件的位置：

// ClientComp.client.jsx
export default function ClientComp({ headerServerComp, contentServerComp }) {
  return (
    <div>
      {headerServerComp}
      <h1>Some other content in between</h1>
      <div>
        {contentServerComp}
      </div>
    </div>
  );
}

// OuterServerComp.server.jsx
import ClientComp from "./ClientComp.client";
import ServerComp from "./ServerComp.server";

export default function OuterServerComp() {
  return (
    <ClientComp
      headerServerComp={<ServerComp />}
      contentServerComp={<ServerComp />}
    />
  );
}

可行性说明 #

外层服务端组件会先渲染ServerComp生成React节点（已完成服务端渲染的序列化内容），再把这些节点传递给客户端组件。客户端组件只负责渲染这些节点，并没有导入服务端组件本身，完全符合React的组件边界规则。

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