是否有可用于忽略缺少强制性 proptypes 警告的道具?
Is there a prop that can be used to ignore missing mandatory proptypes warnings?
我知道这个问题可能看起来有点奇怪,但我正在尝试实现一个骨架加载器。为此,我想向我的组件发送一个像“loading={true}”这样的道具,告诉他们忽略其他参数,因为他们不需要它(他们只需要显示他们正在加载,而不是显示任何有意义的东西)
我想到了一些解决方法:
- 我可以将 proptypes 声明为不需要并简单地声明一个默认值......但是这样我就不会在加载步骤之外收到任何警告
- 只需为强制性道具提供一些巨型道具,但那是很多无用的代码
- 复制每个组件 - “标准组件”和“加载组件”,但我有一些罕见的极端情况,其中一个元素决定它们在 javascript 中显示的元素数量 - 基于用户的视口也将被复制 - 同时将加载器的文件体积加倍。
最后一个想法似乎是最有前途的,因为它还可以防止组件受到额外条件的阻碍,但我仍然想研究让组件管理自己的渲染的想法。
那么,有没有一种方法可以告诉 Proptypes“嘿,我知道你没有所有必需的道具,但请相信我这一次,但其他时候不要相信我?”
非常感谢!
您可以使用可选形状。
它可能看起来像这样; (考虑为伪代码)
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;
我知道这个问题可能看起来有点奇怪,但我正在尝试实现一个骨架加载器。为此,我想向我的组件发送一个像“loading={true}”这样的道具,告诉他们忽略其他参数,因为他们不需要它(他们只需要显示他们正在加载,而不是显示任何有意义的东西)
我想到了一些解决方法:
- 我可以将 proptypes 声明为不需要并简单地声明一个默认值......但是这样我就不会在加载步骤之外收到任何警告
- 只需为强制性道具提供一些巨型道具,但那是很多无用的代码
- 复制每个组件 - “标准组件”和“加载组件”,但我有一些罕见的极端情况,其中一个元素决定它们在 javascript 中显示的元素数量 - 基于用户的视口也将被复制 - 同时将加载器的文件体积加倍。
最后一个想法似乎是最有前途的,因为它还可以防止组件受到额外条件的阻碍,但我仍然想研究让组件管理自己的渲染的想法。
那么,有没有一种方法可以告诉 Proptypes“嘿,我知道你没有所有必需的道具,但请相信我这一次,但其他时候不要相信我?”
非常感谢!
您可以使用可选形状。
它可能看起来像这样; (考虑为伪代码)
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;