如何实现可将子组件置于不同位置的React父组件

你想要的这种类似Blazor的命名子组件写法，React原生确实不支持，但可以通过两种方案实现，既保留嵌套写法的美观性，又能分别控制子组件的渲染位置：

方案一：基于Slot属性的筛选模式 #

这种方式只需要给子组件添加一个标识属性，在Parent组件中遍历children筛选出对应组件：

使用方式 #

<Parent>
  <Child1 slot="child1" childName="Billy" />
  <Child2 slot="child2" childName="Bob" />
</Parent>

Parent组件实现 #

import React, { ReactElement } from 'react';

type ParentProps = {
  children: React.ReactNode;
};

const Parent = ({ children }: ParentProps) => {
  // 封装函数获取指定slot的子组件
  const getSlotComponent = (targetSlot: string) => {
    return React.Children.toArray(children).find(child => {
      const element = child as ReactElement;
      return element.props.slot === targetSlot;
    });
  };

  return (
    <>
      <div>This is Title</div>
      {getSlotComponent('child1')}

      <div>This is another component</div>
      {getSlotComponent('child2')}
    </>
  );
};

这种方案的优点是写法简洁，和你最初的需求几乎一致，只需要额外添加一个slot属性做标识。如果担心slot属性和其他属性冲突，也可以自定义属性名比如componentKey。

方案二：静态子组件作为命名插槽容器 #

通过给Parent挂载静态组件作为插槽的容器，让语义更明确，同时提升类型安全性：

Parent组件实现 #

import React from 'react';

type ParentProps = {
  children: React.ReactNode;
};

const Parent = ({ children }: ParentProps) => {
  let child1Content: React.ReactNode = null;
  let child2Content: React.ReactNode = null;

  // 遍历children识别插槽容器
  React.Children.forEach(children, child => {
    if (React.isValidElement(child)) {
      switch (child.type) {
        case Parent.Child1:
          child1Content = child.props.children;
          break;
        case Parent.Child2:
          child2Content = child.props.children;
          break;
      }
    }
  });

  return (
    <>
      <div>This is Title</div>
      {child1Content}

      <div>This is another component</div>
      {child2Content}
    </>
  );
};

// 定义Parent的静态子组件作为插槽容器
Parent.Child1 = ({ children }: { children: React.ReactNode }) => <>{children}</>;
Parent.Child2 = ({ children }: { children: React.ReactNode }) => <>{children}</>;

使用方式 #

<Parent>
  <Parent.Child1>
    <Child1 childName="Billy" />
  </Parent.Child1>
  <Parent.Child2>
    <Child2 childName="Bob" />
  </Parent.Child2>
</Parent>

这种方案的优点是语义清晰，通过Parent.Child1明确标识这是Parent的第一个插槽，类型检查更容易实现，适合大型团队项目，避免标识名冲突。

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