对应于“PropTypes.element”的“defaultProp”的正确值是多少？

Question

我有一个组件，我希望接受另一个组件作为道具，并渲染它。我希望传递的组件是可选的，在这种情况下什么也不渲染。

以下代码完美运行：

const Component = ({ Inner }) => (
  <div style={{ borderStyle: "solid" }}>
    <Inner />
  </div>
);

Component.propTypes = {
  Inner: PropTypes.element
};

Component.defaultProps = {
  Inner: () => null
};

但是，在第一次加载页面时，prop-types 抱怨：

警告：失败的道具类型：提供给Component 的function 类型的无效道具Inner，需要一个ReactElement。

我目前的解决方案是将propType 重新定义为PropTypes.oneOfType([PropTypes.element, PropTypes.func])，但这似乎完全不正确。

我的propType 或defaultProp 实际上应该是什么？

SSCCE in a sandbox.

这个问题与If proptype of element what is the default? 类似，但它接受了一个不起作用的答案，即使它起作用了，这对我也没什么帮助，因为我正在使用真正的 react native。我没有以与本机反应有关的方式提出问题，就像我说的那样，我的示例有效，只是prop-types 是个大坏蛋。

Answer 1

使用 elementType 的类型将解决您的问题。

Component.propTypes = {
  Inner: PropTypes.elementType
};

因为你的 prop 是一个 react 组件，所以我们使用 elementType。如果你曾经打开 prop-types 的源代码，你会在那里找到它。

希望对你有所帮助。