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

Question

这个问题有两个部分：

1. 为什么在我的反应方案中，道具类型检查失败？
2. 为什么材料-ui HoC会干扰类型检查？

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

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

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

事实证明，根组件（EnhancedPrimaryUI）从父级或增强器传递必要的道具。另一方面，它是子的prop类型，在页面加载时会失败。运行devtools只会显示运行时的内容，看起来完全正常：

我真的不知道为什么它必须像那样！对我来说，它似乎只是React的内部运作。我的初步解决方法是在每个孩子或App.js see second example中添加defaultProps。

我知道其他替代方法，例如传递上下文或将子组件连接到redux，但是在这种情况下看不出如何激发这种方法。

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

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

那么这里发生了什么？是否通过React的命令间接影响它？它是一个功能还是一个bug？

Answer 1

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

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

在旁注中，现在使用React-hooks可以实现更清洁的预期机制。见例子：https://codesandbox.io/s/71r7l9ppvj