React组件中如何正确向返回函数的函数传递参数

你的写法其实完全没问题！逻辑是正确的，已经实现了你想要的效果——把组件props里的propA、propB作为myFunc的a、b参数，当MyComponent触发validate时，将传入的value作为c传给内部函数。不过我们可以根据实际场景优化一下代码，让它更简洁或者更高效。

先确认你的初始代码逻辑 #

你原来的代码：

validate = (value) => {
  const { propA, propB } = this.props;
  return myFunc(propA, propB)(value);
}
render() {
  return <MyComponent validate={this.validate} />
}

这段代码的执行流程完全符合需求：

1. 当MyComponent触发validate时，会传入当前的value
2. 你的validate函数从最新的props中取出propA和propB
3. 调用myFunc(propA, propB)生成一个接收c的函数，再把value传进去执行

优化方案分两种场景 #

场景1：propA和propB是静态不变的

如果这两个属性在组件生命周期内不会变化，我们可以提前生成validate函数，避免每次触发validate或者组件render时重复创建函数，提升性能：

constructor(props) {
  super(props);
  // 只在组件初始化时生成一次validate函数
  this.validate = myFunc(props.propA, props.propB);
}

render() {
  return <MyComponent validate={this.validate} />;
}

场景2：propA或propB是动态变化的

如果这两个属性会随着业务逻辑更新，那你原来的写法就很合适，因为每次validate被调用时都会获取最新的props值。我们也可以简化一下代码写法，去掉解构的步骤，让代码更紧凑：

validate = (value) => myFunc(this.props.propA, this.props.propB)(value);

这段代码和你原来的逻辑完全一致，只是少了一行变量解构，可读性和执行效果都一样。

总的来说，你的初始实现是正确的，完全能满足需求，根据propA/propB是否动态变化选择对应的优化写法即可。

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