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

Question

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

这有什么固有的问题吗？

例如

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}传递它们只会减少打字,有点像在一个死尸腐烂的尸体上喷洒Febreeze.

我问,为什么你同时拥有create和update方法VS一个提交方法？

你是如何使用organisationId和userId？如果只需将这些传递给传入的create和update(或submit)方法,为什么不传递它们并让onCreate/ onUpdatehandlers提供它们？

也许JobForm应该呈现为:

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

在JobForm你有props.children,但这些是单独的部件,可能是罚款,单独的部件.

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