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