有时我的组件具有大量属性.
这有什么固有的问题吗？
例如
- 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,但那些是独立的组件,可能作为单独的组件.
我只是没有足够的信息来回答这个问题,但是通过将你的组件分解成更简单的东西,道具的数量会减少,气味也会减少.
