动态创建回调

Question

我有十多个回调方法，它们的形式均为：

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();
    });
};