动态创建回调

Question

我有10个回调方法，它们的形式都是：

xCallback = (value) => {
this.setState({x: value}, () => {
this.update();
});
};
yCallback = (value) => {
this.setState({y: value}, () => {
this.update();
});
};
...

我将这些方法作为回调传递给子组件(我不能修改的第三方组件(：

<ChildComponent ... callback={this.xCallback}/>

有没有办法缩短这个代码并消除重复的代码？

Answer 1

您可以接受一个传统的parameter，它是要更新的key。由于不能更改传递给子组件的函数的签名，因此可以使用currying返回具有固定签名的动态回调

const generateCb = key => value => this.setState({ [key] : value }, () => {})
return <Child callback={generateCb('x')}

其中generateCb('x')将评估为

value => this.setState({ 'x' : value }, () =>{})

Answer 2

您可以将第二个参数设置为关键

cCallback = (value, key) => {
this.setState({[key]: value}, () => {
this.update();
});
};