javascript - 如果我想将 React 组件的函数作为属性传递下来，那么包装它有什么意义呢？

Question

这有什么意义呢？在下一个示例中，我在书籍代码中发现我们在组件中有一个更改组件状态的函数 createTimer()

createTimer = (timer) => 
{
   const t = helpers.newTimer(timer);
   this.setState({
     timers: this.state.timers.concat(t),
   });

   client.createTimer(t);   
};

已包装:

handleCreateFormSubmit = (timer) => {
this.createTimer(timer); };

并作为属性(property)传递下去:

<ToggleableTimerForm
onFormSubmit={this.handleCreateFormSubmit}
/>

Answer 1

如果你这样做:

<ToggleableTimerForm onFormSubmit={this.createTimer}/>

...并且 createTimer 是您的类的常规方法:

class YourComponent extends Component {
  createTimer(timer) {
    const t = helpers.newTimer(timer);
    this.setState({
      timers: this.state.timers.concat(t),
    });

    client.createTimer(t);
  }
}

...那么问题就在于，当子组件调用 onFormSubmit 时，this 将无法正确设置。

但是由于您正在设置实例的属性并使用箭头函数:

class YourComponent extends Component {
  createTimer = (timer) => {
    const t = helpers.newTimer(timer);
    this.setState({
      timers: this.state.timers.concat(t),
    });

    client.createTimer(t);   
  };
}

...您不必担心 this 是否正确绑定(bind)，因此您不需要需要包装器来解决这个问题是对的。也许包装函数是作为一种预防措施，因为类方法模式更常见。

您获得的唯一好处是子进程使用您想要忽略的其他参数调用 this.props.onFormSubmit。如果情况并非如此，那么您可以省略包装函数。