代码之家 › 专栏 › 技术社区 › Octavian Niculescu

通过许多组件传递道具的最佳方式

typescript reactjs javascript

Octavian Niculescu · 技术社区 · 3 年前

假设我正在从应用程序组件中的API获取一些图像。

然后我想把它传递给负责渲染图像的组件。但该组件不是应用程序组件的直接子组件。它是应用程序组件的直接子级的子级。

但是,如果这个层次结构变得更复杂,甚至只需要再增加一个组件,会发生什么呢

凭直觉,这可能不是最好的事情。

1 回复 | 直到 3 年前

Diego 3 年前

这个问题在世界上通常被称为支柱钻井: https://kentcdodds.com/blog/prop-drilling

有几个选择:

<Comp {...props} /> 通过保持组件接口的相似性。(许多人不喜欢道具传播,因为你可能会无意中传递不受支持的道具,但如果你使用TypeScript,编译器会捕捉到这一点)。
您可以使用React上下文: https://reactjs.org/docs/context.html useSelector 钩)。

我个人的选择是从支柱钻井开始,它更容易模块化和单元测试。然后,您可以分层思考应用程序:上层依赖于上下文(或状态框架),下层接收属性。当您想要重构并将可重用组件移动到其他项目时,这会有所帮助。

推荐文章