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