javascript - 在 react 类组件中使用不带参数的柯里化(Currying)函数的目的是什么？

Question

在 Material ui React Components 演示中看到了这个设置，想知道这个柯里化(Currying)函数的目的是什么:

toggleDrawer = (side, open) => () => {
   this.setState({
      [side]: open,
   });
};

在其他地方他们这样调用它:

<Button onClick={this.toggleDrawer('left', true)}>Open Left</Button>

Answer 1

toggleDrawer是一个可以产生其他功能的工厂。它被用来减少代码重复。如果这是代码中唯一有 onClick 的地方，那么它不是很有用，但可能还有其他类似这样的代码行:

<Button onClick={this.toggleDrawer('top', true)}>Foo</Button>
<Button onClick={this.toggleDrawer('bottom', true)}>Bar</Button>
<Button onClick={this.toggleDrawer('left', false)}>Baz</Button>
<Button onClick={this.toggleDrawer('cobb', 'salad')}>Yum</Button>

就我个人而言，我会为其命名不同的名称，以明确它是一个工厂，例如 makeToggleHandler