React中以children传递回调是否合理？是否属于反模式？

1. 这种以children传递回调的方式是否属于反模式？ #

这不是反模式，它是React中经典的Render Props模式——通过将children定义为函数，让父组件把内部状态或计算结果传递给渲染逻辑，实现组件逻辑与视图的分离复用。Optimizely在这里用这种方式，把feature的启用状态、配置变量等核心数据暴露给业务侧的渲染代码，是完全合理的用法，在React生态中被广泛应用（比如React Router的<Route>、第三方状态管理组件等都有类似实现）。

2. 传递的类型是否不符合规范？ #

只要TypeScript类型定义明确，就完全符合规范。对于这个组件来说，FeatureProps中的children应该被定义为返回React节点的函数类型，比如：

type FeatureProps = {
  feature: string;
  timeout?: number;
  autoUpdate?: boolean;
  overrideUserId?: string;
  overrideAttributes?: Record<string, any>;
  children: (
    isEnabled: boolean,
    variables: Record<string, any>,
    clientReady: boolean,
    didTimeout: boolean
  ) => React.ReactNode;
};

React的类型系统本身允许children是函数（而非仅React元素），只要类型声明清晰，就能保证类型安全，不存在不符合规范的问题。

3. 是否改为单独传递回调用于渲染会更好？ #

两种写法各有优劣，没有绝对的“更好”：

• 用children作为渲染回调：写法更符合JSX的嵌套直觉，代码结构紧凑，能直接看到<OptimizelyFeature>和它对应的渲染逻辑的关联，是这类功能组件的常见写法；
• 改用单独的render props（比如<OptimizelyFeature render={() => {...}} />）：语义更明确，能避免和普通子元素混淆，尤其适合组件同时支持普通children和渲染回调的场景。但对于Optimizely这种专门封装feature开关逻辑的组件，用children已经足够清晰，除非团队有统一的编码规范要求，否则没必要刻意更改。

参考代码示例 #

业务侧使用方式：

<OptimizelyFeature feature="price_filter">
  {(isEnabled, variables) => (
     isEnabled
       ? `Price filter enabled with a min price of ${variables.min_price}`
       : `Price filter is NOT enabled`
  )}          
</OptimizelyFeature>

组件底层实现：

const FeatureComponent: React.FunctionComponent<FeatureProps> = props => {
  const { feature, timeout, autoUpdate, children, overrideUserId, overrideAttributes } = props;
  const [isEnabled, variables, clientReady, didTimeout] = useFeature(
    feature,
    { timeout, autoUpdate },
    { overrideUserId, overrideAttributes }
  );

  if (!clientReady && !didTimeout) {
    // 在超时前等待客户端准备完成时，暂时不渲染内容
    return null;
  }

  return <>{children(isEnabled, variables, clientReady, didTimeout)}</>;
};

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