时间戳

首页 > 解决方案 > 如何判断 React 中哪些 props 来自哪个库？

reactjs - 如何判断 React 中哪些 props 来自哪个库？

问题描述

我是一名 React 初学者，我的任务是理解和重构/增强遗留代码。我观察到大多数组件和容器都有很多“神奇”地出现并且可以使用的道具。

当然，props 是由某些库而不是魔法来填充的，但是对于没有足够了解项目中使用的所有库的人来说，了解单个组件中 props 的来源是很麻烦的；特别是如果组件有很多进口。

看这个例子：

const { error, location, submitting, handleSubmit, intl: { formatMessage } } = this.props

现在，我已经通过一一检查和谷歌搜索找到了location来自react-router图书馆、intl来自react-intl和剩余的来自redux-form. 有没有更简单的方法来理解哪个道具由哪个库填充？

标签： reactjs

解决方案

在普通的 JS 中，除了通过组件树跟踪 props 并找出它们被注入的位置之外，别无他法。要么就是这样，要么只是通过你有经验的常用库来了解道具命名。

您可能正在处理一个架构不佳的项目。最佳实践是只在组件之间传递库道具一级，即从容器到组件。它们不应该从一个组件传递到另一个组件，因为这会使架构变得太脆弱且难以理解。

但是，如果您使用某种类型系统（Flow 或 TypeScript），则可以指示道具的类型，例如

import type { Location } from 'react-router'

type Props = {
  location: Location,
}

推荐阅读