为什么嵌套克隆子级上的“道具类型失败”，即使父级具有正确的初始值？答案

【问题标题】：Why "Failed prop type" on nested cloned children, even though parent have correct initial values?为什么嵌套克隆子级上的“道具类型失败”，即使父级具有正确的初始值？
【发布时间】：2018-08-03 19:10:58
【问题描述】：

这个问题有两个部分：

为什么在我的 react-only 场景中道具类型检查失败？
为什么 material-ui HoC 会干扰类型检查？

在制作 UI 组件时，我通过在单向流中通过 React.cloneElement 传递道具，让孩子们彼此不知道。在我的方法中，根组件更新其屏幕尺寸状态，它的子组件必须接受并将其传递给下一个子组件，并且他们可以根据留给它的内容区域尺寸调整值。这个想法是叶子孩子本身可以根据剩余的空间来决定如何渲染。

在我的简化代码示例中，WithSize-enhancer 通知根组件全屏大小，而 BridgedContent-enhancer 通知叶组件如何/是否应该渲染：

https://codesandbox.io/s/92vop4oyr4

事实证明，根组件 (EnhancedPrimaryUI) 从父组件或增强器传递而来的必要属性。另一方面，它是孩子的道具类型，将在页面加载时失败。运行 devtools 只显示运行时发生了什么，看起来完全没问题：

我真的不知道为什么会这样！对我来说，这似乎是 React 的内部运作。我暂定的解决方法是在每个孩子或 App.js see second example 中添加 defaultProps。

我知道其他解决方法，例如传递上下文或将子组件连接到 redux，但不知道在这种情况下如何激发这样的动机。

我更加困惑，因为我实现了 Material-UI，并发现使用 WithStyles-enhancer 神奇地设置样式的每个子组件都不会导致 prop 类型失败！ see third example

我知道 material-ui 使用上下文仅将主题/类传递给withStyles.js，并声称不会修改传递给它的组件。

那么这里发生了什么？它会通过 React 做事的顺序间接影响它吗？它是一个功能还是一个错误？

【问题讨论】：

用最简单的术语来说，在您的示例中，<BridgedContent/> 上没有 height 属性。

标签： javascript reactjs material-ui react-proptypes higher-order-components

【解决方案1】：

虽然我还没有找到对问题 1 的解释（为什么尽管道具看起来很流畅，但没有满足道具要求），但我发现有几种方法可以确保道具安全到达那里：

在 App.js 中添加初始 JSX 属性：<SecondaryUI height={0} width={0} isMobile={false}> BridgedContent height={0} width={0} isMobile={false}/></...
使用来自包装器组件的初始状态（如在 PrimaryUI 中），其中包装器可以是上下文提供者。（这可能是问题 2 的线索）
使用默认道具

顺便说一句，现在使用 React-hooks 可以更简洁地完成预期的机制。参见示例：https://codesandbox.io/s/71r7l9ppvj

【讨论】：