Question

有时我的组件具有大量属性。

这有什么固有的问题吗？

e.g。

render() {

  const { create, update, categories, locations, sectors, workTypes, organisation } = this.props; // eslint-disable-line no-shadow

  return (
    <div className="job-container">
      <JobForm
        organisationId={organisation.id}
        userId={user.id}
        action={action}
        create={create}
        update={update}
        categories={categories}
        locations={locations}
        sectors={sectors}
        workTypes={workTypes}
      />
    </div>
  );
}

最佳做法是什么？

Answer 1

我认为你已经公认了代码味道。任何时候你有一个函数（组件）的那么多输入（道具），你必须质疑，你如何测试这个组件与所有的参数组合的排列。使用{...this.props}将它们传下来只会减少打字，有点像在一具尸体腐烂的尸体身上喷洒两颗冰粉。

我问你为什么同时拥有create和update方法与提交方法？

您是如何使用organisationId和userId的？如果仅需要将这些传递给也传入的create和update（或submit）方法，为什么不传递它们并让onCreate / onUpdate处理程序是否提供给他们？

也许JobForm应该呈现为：

<JobForm /* props go here */>
   <CategoryDroplist categories=this.props.categories />
   <LocationDroplist locations=this.props.locations />
</JobForm>

在JobForm props.children内你有MySQLdb，但这些是单独的组件，可能是单独的组件。

我只是没有足够的信息来回答这个问题，但是通过将你的组件分解成更简单的东西，道具的数量会减少，气味也会减少。

Answer 2

多年来，许多语言都有风格指南，建议限制函数的参数数量。甚至ESLint也有这样的规则并指出：“......可能难以读写，因为它需要记住每个参数的内容，类型以及它们应该出现的顺序。”。

我认为在JSX中也是如此。而且，由于JSX是JS的DSL，我们正在编译代码气味，类似。

Answer 3

除了冗长之外，它没有任何问题，但当然，这将使您的组件从根本上难以维护。

使其更通用的一种常见方法是使用扩展运算符，以速记方式传递所有这些道具。

<JobForm {...this.props} />

解决问题的另一种方法是通过将组件分成更小，更集中的组件来共享组件的责任。

反应：对反应组分的道具数量是否存在可观的限制

3 个答案: