javascript - 动态创建回调

Question

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

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

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

我将这些方法作为回调传递给子组件(我无法修改的第三方组件):

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

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

Answer 1

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

const generateCb = key => value => this.setState({ [key] : value }, () => {})

return <Child callback={generateCb('x')}

其中generateCb('x')将计算为

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