Question

我有一个场景，我有两个组件都使用我编写的TagInput组件。不幸的是，TagInput需要很多回调，用于标记添加，创建，删除等。所以代码看起来像这样：

<ComponentOne
  onTagAdd={this.tagAdd}
  onTagCreate={this.tagCreate}
  onTagDelete={this.tagDelete}
  onTagSetAll={this.tagSetAll}
/>

<ComponentTwo
  onTagAdd={this.tagAdd}
  onTagCreate={this.tagCreate}
  onTagDelete={this.tagDelete}
  onTagSetAll={this.tagSetAll}
/>

除了这两个组件需要的任何其他道具之外，这可能相当长的列表。

我的问题是，有更好的方法来构建它吗？我能想到的唯一解决方法是进行一次回调，如下所示：

<ComponentOne
  onTagAction={this.handleTagAction}
/>

<ComponentTwo
  onTagAction={this.handleTagAction}
/>

然后将一个动作和参数传递给回调：

handleTagAction = (action, args) => {
  switch (action) {
    case 'add':
      break;
    case 'create':
      break;
    // ...
  }
};

有没有更好的方式我没想到？

Answer 1

您也可以拥有一个对象，例如

const tagActions = {
   add : this.tagAdd,
   create : this.tagCreate,
   delete : this.tagDelete,
   setAll : this.tagSetAll, 
}

然后将tagActions作为单个道具传递给您的组件。然后，您可以从组件中根据用例调用方法，例如this.props.tagActions.add()

限制传递到React组件

1 个答案: