javascript - 如何为使用 withRouter 包裹的组件定义 propTypes？

Question

我想知道在将用第 3 方 HOC 包装的组件上定义 propTypes 的最佳实践是什么，在本例中为 withRouter()来自 React-Router。

据我了解，propTypes 的目的是让您(和其他开发人员)知道组件应该期待什么 Prop ，如果违反了 React 会发出警告。

因此，由于关于位置的 props 已经由 withRouter() 传递，没有人为干预，是否有必要在这里担心它们？

这是我正在使用的组件:

const Menu = ({ userId, ...routerProps}) => {

  const { pathname } = routerProps.location
  return (
      // Something using userID
      // Something using pathname
  )
}

Menu.propTypes = {
  userId: PropTypes.number.isRequired,
  // routerProps: PropTypes.object.isRequired,
  // ^ this is undefined, bc withRouter passes it in later?
}

export default withRouter(Menu)

//.... in parent:
<Menu userId={id} />

在这种情况下约定是什么？

Answer 1

It is my understanding that the point of propTypes is so you (and other developers) know what props a component should expect, and React will give warnings if this is violated.

这是正确的。

What would be the convention in this case?

我认为您不会找到明确的答案。有些人会争辩说，如果您定义一个 propType，您应该定义所有预期的 prop 类型。其他人会像您一样说，它不会由父组件(不包括 HOC)提供，所以何必呢。还有一类人会告诉你根本不用担心 propTypes...

就我个人而言，我属于第一类或最后一类:

• 如果组件是供其他人使用的，例如通用 ui 组件(例如 TextField、Button 等)或库的界面，那么 propTypes 很有用，您应该定义它们。
• 如果组件仅用于特定目的，在单个应用程序中，那么通常根本不用担心它们，因为在传递错误的 props 时，您将花费更多的时间来维护它们而不是调试(尤其是如果您正在编写小巧、易于使用的功能组件)。

包含 routerProps 的论据是保护您免受 withRouter 提供的 props 的更改，如果它们将来发生变化的话。

所以假设你想为 withRouter 包含 propTypes 那么我们需要分解它们实际上应该是什么:

const Menu = ({ userId, ...routerProps}) => {
  const { pathname } = routerProps.location
  return (
      // Something using userID
      // Something using pathname
  )
}

看上面的代码片段，您可能认为 propTypes 应该是

Menu.propTypes = {
  userId: PropTypes.number.isRequired,
  routerProps: PropTypes.object.isRequired
}

但是你会误会的……前两行包含大量 props 转换。其实应该是

Menu.propTypes = {
  userId: PropTypes.number.isRequired,
  location: PropTypes.shape({
    pathname: PropTypes.string.isRequired
  }).isRequired
}

为什么？该片段相当于:

const Menu = (props) => {
  const userId = props.userId
  const routerProps = Object.assign({}, props, { userId: undefined }
  const pathname = routerProps.location.pathname
  return (
      // Something using userID
      // Something using pathname
  )
}

如您所见，routerProps 实际上根本不存在于 props 中。 ...routerProps 是 rest parameter所以它获得了 props 的所有其他值，在本例中是 location(可能还有其他您不关心的东西)。

希望对您有所帮助。