如何向作为属性传递的函数式组件传递额外Props？

针对你给出的代码场景，要给AFunctionalComponent传递额外属性，有几种通用的实现方式：

方法1：用匿名组件包装透传 #

通过匿名组件接收AComponent自动传递的foo、bar、baz，再手动添加额外属性后传给目标组件：

<AComponent>
  foo={{
    bar: (autoProps) => <AFunctionalComponent {...autoProps} extraAttr="自定义内容" count={456} />
  }}
</AComponent>

这里的autoProps就是AComponent自动注入的那组属性，用扩展运算符...把它们全部传给AFunctionalComponent，再追加你需要的额外属性即可。

方法2：创建带额外属性的组件封装 #

如果需要重复使用带相同额外属性的AFunctionalComponent，可以先封装一个专用版本：

// 封装带固定额外属性的组件
const AFunctionalComponentWithExtra = (props) => {
  return <AFunctionalComponent {...props} extraAttr="固定值" count={456} />;
};

// 传入AComponent使用
<AComponent>
  foo={{bar: AFunctionalComponentWithExtra}}
</AComponent>

这种方式更适合需要多次复用的场景，避免重复写匿名组件。

方法3：利用组件自身的额外属性配置（如果支持） #

部分组件库的容器组件（比如AComponent这类）会提供专门的参数，允许给子组件传递额外属性。如果AComponent的文档里有类似passProps的配置项，可以直接这么写：

<AComponent>
  foo={{
    bar: AFunctionalComponent,
    passProps: { extraAttr: "自定义内容", count: 456 }
  }}
</AComponent>

注意：这种方式依赖AComponent的内部实现，需要先确认它是否支持这类配置。

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