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

如果您只是这样做：

<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被正确绑定，因此您说不需要可以使用包装程序来解决此问题。由于类方法模式更为常见，因此可能存在包装功能作为预防措施。

您唯一获得的好处是，如果孩子使用您要忽略的其他参数调用this.props.onFormSubmit。如果不是这种情况，则可以省略包装功能。

Answer 2

通常，您向下传递一个绑定到其原始组件的函数。这允许子组件更改其父组件的状态。想象一下这种情况：

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

要记住的一些事情是词法箭头函数 LACK SCOPE ，如果该函数利用了组件的状态，则必须将其绑定到组件。

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

handleCreateFormSubmit需要一个参数。 onFormSubmit会做到这一点，但我认为它不会是您所期望的。它会通过事件。您可以按照以下方式进行操作“

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

如果要将属性作为属性传递给我，包装React组件的功能有什么意义？

2 个答案: