是否有一个道具可以用来忽略缺少的强制 proptypes 警告？

Question

我知道这个问题可能看起来有点奇怪，但我正在尝试实现一个骨架加载器。为此，我想向我的组件发送一个类似“loading={true}”的道具，告诉他们忽略其他参数，因为他们不需要它（他们只需要显示他们正在加载，而不是显示任何有意义的东西）

我想到了一些解决方法：

• 我可以将 proptypes 声明为不需要并简单地声明一个默认值...但是在加载步骤之外我不会有任何警告
• 只需为强制性道具提供一些巨型道具，但这是很多无用的代码
• 复制每个组件 - “标准组件”和“加载组件”，但我有一些罕见的极端情况，其中一个元素决定它们在 javascript 中显示的元素数量 - 基于用户的视口，也必须复制 - 旁边加载程序的文件量翻倍。

最后一个想法似乎最有希望，因为它还可以防止组件受到额外条件的阻碍，但我仍然想研究让组件管理自己的渲染的想法。

那么，有没有办法告诉 Proptypes “嘿，我知道你没有所有必需的道具，但这次相信我，但其他时候不相信？”

提前非常感谢！

Answer 1

您可以使用可选的形状。

它可能看起来像这样； （视为伪代码）

import React from 'react';
import PropTypes from 'prop-types';
import MyComponent from 'somewhere';

const Example = ({ loading, options }) => (
  loading ? <div>Loading...</div> : <MyComponent {...options} />
);

Example.propTypes = {
  loading: PropTypes.bool.isRequired,
  options: PropTypes.oneOfType([null, PropTypes.shape({
    prop1: PropTypes.bool.isRequired,
  })]),
}

Example.defaultProps = {
  options: null,
}

export default Example;