如果我想将它作为属性传递下去，那么包装 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); };

并传递为属性:

<ToggleableTimerForm
onFormSubmit={this.handleCreateFormSubmit}
/>

Answer 1

通常，您向下传递一个绑定到其原始组件的函数。这允许 child 组件改变其 parent 的状态。想象一下这个场景：

我有一个状态为属性 A 的 parent 组件。我有一个接受输入并更新 PARENT 状态的函数！！！！我将其作为道具传递给 child（也许是一种形式）。当我提交表单时，我调用作为道具传递的函数以使用我的表单值更新 PARENTS 状态。

需要记住的几件事，词法箭头函数 LACK SCOPE，如果函数利用组件的状态，则它必须绑定到组件。

我在你的代码中看到一个问题....

handleCreateFormSubmit 需要一个参数。 onFormSubmit 会通过它，但我不认为它会是您期待的那个。它会通过事件。你可以按照这些行做一些事情“

onFormSubmit={() => this.handleCreateFormSubmit(someValue)}

Answer 2

如果你这样做：

<ToggleableTimerForm onFormSubmit={this.createTimer}/>

...并且 createTimer 是您 class:

的常规方法

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

    client.createTimer(t);
  }
}

...那么问题就是当 child 组件调用 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 被正确绑定，所以您是对的 不需要 需要包装器来修复那。也许包装函数是作为一种预防措施存在的，因为 class 方法模式更常见。

您获得的唯一好处是，如果 child 调用 this.props.onFormSubmit 时带有您想要忽略的其他参数。如果不是这种情况，那么您可以省略包装功能。

如果我想将它作为属性传递下去，那么包装 React 组件的功能有什么意义？

What is the point of wrapping a function of react component if i want to pass it down as a property?

javascript

eventhandler

如果我想将它作为 属性 传递下去，那么包装 React 组件的功能有什么意义？

What is the point of wrapping a function of react component if i want to pass it down as a property?

javascript

eventhandler

如果我想将它作为属性传递下去，那么包装 React 组件的功能有什么意义？