与“ PropTypes.element”相对应的“ defaultProp”的正确值是什么？

Question

我有一个组件，希望接受另一个组件作为道具，然后进行渲染。我希望该传递的组件是可选的，并且在这种情况下不呈现任何内容。

以下代码可以正常工作：

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

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

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

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

  

警告：道具类型失败：提供给Inner的类型function的道具Component无效，应该有一个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
};

由于您的道具是反应组件，因此我们使用elementType。如果您打开了prop-types的源代码，您将在此处找到它。

希望如此对您有帮助。