React中如何修改作为prop传入组件的函数返回值

该需求完全可以实现，且不需要修改传入的原始函数，符合React单向数据流的规范。

核心逻辑是在组件内部创建一层包装函数，先调用传入的callback拿到其返回的属性对象，再将该对象作为props传入目标内部组件即可，全程不需要改动原始传入的callback逻辑。

完整示例代码：

// 外部传入的callback示例，不需要做任何修改
const callback = ({ foo, bar }) => ({
  prop1: foo,
  prop2: bar
})

const MyComponent = ({ callback }) => {
  const someItems = [{name: 'one', foo: 1, bar: 1}, {name: 'two', foo: 2, bar: 2}]

  // 包装原函数，适配返回值为JSX元素
  const renderItem = (item) => {
    // 执行原callback拿到返回的props对象
    const innerProps = callback(item)
    // 将props透传给InternalComponent
    return <InternalComponent {...innerProps} />
  }

  return someItems.map(renderItem)
}

• 禁止直接修改props传入的callback：React中props是只读的，直接修改传入的prop会违反单向数据流原则，引发难以排查的状态不一致问题。
• 透传props优先用展开运算符...：这种写法不需要手动枚举原callback返回的属性，后续如果原callback的返回字段新增、调整，包装层不需要同步修改代码，维护成本更低。
• 如果需要给InternalComponent增加固定属性，直接在组件上声明即可，注意属性顺序决定覆盖关系：后写的属性会覆盖前写的同名属性。比如要加固定类名，可以写成<InternalComponent className="list-item" {...innerProps} />，如果希望innerProps里的同名属性覆盖固定值，就把{...innerProps}放在后面。
• 如果逻辑足够简单，甚至不需要单独声明包装函数，可以直接在map里内联写逻辑：

return someItems.map(item => <InternalComponent {...callback(item)} />)

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