传递给子组件时是否应该拆分道具

时间:2019-03-22 18:44:46

标签: reactjs typescript

我有一个React User Profile页面,该页面从后端检索User对象。用户个人资料对象包含很多字段(大约30个)。我了解到在Typescript中创建IUser接口并将检索到的User对象(JSON数据)强制转换为IUser是一种好习惯。

用户页面分为多个子组件,每个组件仅需要User对象中的某些字段集(一个组件显示用户常规信息,另一个显示用户相关的帖子等)。

由于每个子组件仅需要一组用户字段,因此我不得不在每个子组件的Props中重复所有必填字段。在我看来,这似乎是过度设计,并且会导致大量代码。

另一种选择是将整个user对象传递给每个子组件。这样,它就可以工作,但同时也闻起来很不好,因为我正在将道具传递给实际上不使用道具的组件。

解决此问题的优雅方法是什么?

2 个答案:

答案 0 :(得分:1)

React完全是关于在组件树中向下流动的数据的。如果您遇到状态分散的问题,则可以随时使用redux。有些应用程序过于复杂且嵌套过多,无法充分利用道具。看一下hooks,它们使重用状态逻辑成为可能,但是如果您想要的是真正的共享状态,请使用props或某些状态管理工具,例如redux。在这种情况下,请勿使用上下文

答案 1 :(得分:0)

如果您的react版本允许,您可以使用上下文API。

Context API允许您避免在调用道具时进行钻探,这可能是解决问题的好方法。

我认为本文将为您提供帮助:https://adamisntdead.com/reacts-context-api/