javascript – React：对反应组件的道具数量是否存在可观的限制

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

这有什么固有的问题吗？

例如

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>
  );
}

什么是最佳做法？

解决方法

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

我问为什么你有一个创建和更新方法与提交方法？

你是如何使用organisationId和userId的？如果只需要将这些方法传递给也传入的创建和更新(或提交)方法,为什么不传递它们并让onCreate / onUpdate处理程序提供它们呢？

也许JobForm应该呈现为：

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

在JobForm中你有props.children,但那些是独立的组件,可能作为单独的组件.

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