有时我的组件具有大量属性.
这有什么固有的问题吗?
例如
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,但那些是独立的组件,可能作为单独的组件.
我只是没有足够的信息来回答这个问题,但是通过将你的组件分解成更简单的东西,道具的数量会减少,气味也会减少.
原文地址:https://www.jb51.cc/js/150595.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。