reactjs - 在呈现组件之前 react proptypes 警告？

Question

我有一个组件包裹着其他组件，并在加载所有必要数据时有条件地呈现它们。但是，我遇到了 proptype 错误——沿着 the prop x is marked as required in component Y but its value is undefined 的行。 prop x 是尚未从服务器返回的数据，component Y 是数据返回时将呈现的子组件。

这是我正在谈论的例子:

<Wrapper contentLoaded={hasDataLoaded && !!dataThatWillLoad}>
  <ComponentWithData
    dataThatWillLoad={dataThatWillLoad}
    dataThatAlreadyExists={dataThatAlreadyExists}
   />
</Wrapper>

和我的包装器组件:

const Wrapper = ({ contentLoaded, children }) => {
  if (contentLoaded) return children;
  return <p>Loading</p>;
}

这会产生错误 Prop dataThatWillLoad is marked as required in componentWithData but its value is undefined。

这对我来说似乎很奇怪，因为 ComponentWithData 在数据返回之前甚至不会被渲染。这与检查 proptypes 时有关系吗？这条特定的数据通过 mapStateToProps 进入组件，这可能与它有关吗？

谢谢!

Answer 1

按照您编写的方式，将始终创建子项，从而导致您的问题。通过无条件地将它们作为 child 添加到您的包装器组件中，React 将在将它们添加到 children 属性之前创建它们。另一种方法是使用组件本身向包装器添加一个 Prop 。您可以在 React Router 提供的 Route 组件中看到这样的示例:https://reacttraining.com/react-router/web/api/Route

使用这种设计模式，您应该能够通过仅在加载 props 时渲染组件而在未加载时加载单独的组件来跳过渲染。

编辑:TLDR:按照您的设置方式，ComponentWithData 组件在作为子组件提供给您的包装器之前创建并提供 Prop 。