React中如何为作为props传递的函数补充额外参数？

你原来的写法存在一个关键问题：直接写someFunction(passedByComponent, passedByComponent, iWantToFillThisOneInManually)会立即执行这个函数，最终把函数的返回值（而非函数本身）传给子组件的somePropName，子组件调用时自然会出错。

要实现「父组件预先填充第三个参数，子组件只传前两个」的需求，有几种常用的靠谱实现方式：

1. 箭头函数包装（最直观） #

在父组件传递props时，用箭头函数包裹原函数，预先传入第三个参数：

// 父组件代码
<SomeComponent 
  somePropName={(val1, val2) => someFunction(val1, val2, iWantToFillThisOneInManually)} 
/>

子组件调用props.somePropName('value1', 'value2')时，传入的两个值会和父组件预先定义的第三个参数一起传给someFunction，完全匹配你的需求。

2. 柯里化原函数（更优雅的写法） #

如果可以修改原函数的结构，把它改成柯里化形式——先接收第三个参数，返回一个只需要前两个参数的函数：

// 修改原函数为柯里化版本
const someFunction = (paramThree) => (paramOne, paramTwo) => {
  // 原来的业务逻辑，可直接使用三个参数
};

// 父组件传递时，先传入第三个参数，得到一个简化版函数
<SomeComponent somePropName={someFunction(iWantToFillThisOneInManually)} />

子组件调用props.somePropName('value1', 'value2')时，会自动带上父组件预先传入的第三个参数，逻辑清晰且代码简洁。

3. 使用bind方法（不推荐，可读性差） #

利用函数的bind方法绑定参数，但因为要固定第三个参数，需要给前两个参数留占位符，可读性远不如前两种：

// 父组件代码
<SomeComponent 
  somePropName={someFunction.bind(null, undefined, undefined, iWantToFillThisOneInManually)} 
/>

bind的第一个参数是this（箭头函数无this，传null即可），后面的参数会按顺序绑定到原函数的参数位置，子组件传入的参数会补到undefined的占位位置。

性能优化提示（可选） #

如果父组件频繁渲染，箭头函数或bind会每次生成新函数，可能导致子组件不必要的重渲染。这种情况下可以用useCallback缓存函数：

import { useCallback } from 'react';

// 父组件内
const boundFunction = useCallback(
  (val1, val2) => someFunction(val1, val2, iWantToFillThisOneInManually),
  [iWantToFillThisOneInManually] // 仅当依赖项变化时才重新生成函数
);

<SomeComponent somePropName={boundFunction} />

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