在React中用复杂对象替代children props是否有合理场景？

React允许将对象作为children props传递，但常规写法都是直接将对象解构为props或通过单独的配置props传入。这种非常规写法有没有合理的使用场景？先看两种对比写法：

示例：通过children传递对象 #

type Props = {
  children: {
    a: string;
    b: number;
  }
};

const SomeComponent: React.FC<Props> = ({children}) => {
  return (<><p>{children.a}</p><div>{children.b}</div></>);
}

// 调用方式
<SomeComponent>{{a: "foo", b: 1}}</SomeComponent>

替代方案：直接传props #

type Props = {
  a: string;
  b: number;
};

const SomeComponent: React.FC<Props> = ({a, b}) => {
  return (<><p>{a}</p><div>{b}</div></>);
}

// 调用方式（演示批量传对象场景）
<SomeComponent {...{a: "foo", b: 1}} />

存在合理性的场景 #

虽然常规推荐用props传递，但以下情况可以考虑用children传递对象：

• 统一组件API风格（适配插槽/渲染回调类组件）
  如果组件设计本身支持多种内容传入方式（比如既可以传React节点当UI内容，也可以传配置对象控制组件行为），用children统一接收能保持API的一致性。比如一个弹窗组件，既允许传入JSX作为弹窗内容，也允许传入配置对象定义标题、按钮文案等，这时候用children接收两种类型的输入，调用方不用区分不同的props，写法更统一。

• 兼容动态内容的灵活API
  当组件需要支持静态配置和动态计算配置时，用children可以同时兼容对象和函数两种输入。比如组件内部状态会影响配置内容，这时候children既可以是静态对象，也可以是接收组件内部状态的函数，返回动态计算的对象：

  type Props = {
    children: {a: string; b: number} | ((state: {isActive: boolean}) => {a: string; b: number})
  };
  
  const SomeComponent: React.FC<Props> = ({children}) => {
    const [isActive, setIsActive] = useState(false);
    const config = typeof children === 'function' ? children({isActive}) : children;
    return (<><p>{config.a}</p><div>{config.b}</div></>);
  }
  
  // 静态调用
  <SomeComponent>{{a: "foo", b: 1}}</SomeComponent>
  // 动态调用
  <SomeComponent>{({isActive}) => ({a: isActive ? "激活" : "未激活", b: isActive ? 2 : 1})}</SomeComponent>
  

  这种设计让组件API更灵活，且统一用children作为入口，不用额外定义config或renderConfig等props。

• 适配已有生态/团队约定
  如果团队内部或使用的第三方组件库已经形成了用children传递配置对象的约定，为了保持代码风格一致，避免增加认知负担，可以沿用这种写法。

不推荐的原因（大多数场景） #

除非有上述特殊需求，否则不建议用children传递对象：

• 违背React中children的语义：children原本是用来传递组件的子节点UI内容，传递对象会让其他开发者困惑，增加理解成本
• TypeScript类型提示不够直观：开发者可能会下意识传入JSX节点，导致类型错误
• 不利于维护：非常规写法会让新成员接手时需要额外学习，代码可读性降低

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