我有一个组件将错误作为字符串或具有 2 个必需属性的对象接收。但是null也可以传递给这个props。在我当前的设置中,当传递null时,React 会抛出警告:
警告:props类型失败:
error
提供给的 props无效ErrorDialog
我应该为 React 更改什么以允许null | 字符串 | 这种形状的物体?谢谢!
ErrorDialog.propTypes = {
onResetError: PropTypes.func.isRequired,
error: PropTypes.oneOfType([
PropTypes.shape({
id: PropTypes.number.isRequired,
defaultMessage: PropTypes.string.isRequired,
}),
PropTypes.string,
]),
};
完整代码是:
import React, { PropTypes } from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import { FormattedMessage } from 'react-intl';
const ErrorDialog = ({ error, onResetError }) => {
function renderError() {
if (!error) {
return null;
} else if (typeof error === 'string') {
return error;
} else if (typeof error === 'object') {
return <FormattedMessage {...error} />;
}
return null;
}
return (
<Dialog
modal={false}
open={Boolean(error)}
actions={
<FlatButton
label="OK"
primary
onTouchTap={onResetError}
/>
}
>
{renderError()}
</Dialog>
);
};
ErrorDialog.propTypes = {
onResetError: PropTypes.func.isRequired,
error: PropTypes.oneOfType([
PropTypes.shape({
id: PropTypes.number.isRequired,
defaultMessage: PropTypes.string.isRequired,
}),
PropTypes.string,
]),
};
export default ErrorDialog;
我想隐藏对话框,当没有错误时,显示原始字符串,如果错误是字符串类型,并在指定消息描述符时呈现翻译的消息。
更新:我采用了这样的解决方案:
ErrorDialog.propTypes = {
onResetError: PropTypes.func.isRequired,
// eslint-disable-next-line consistent-return
error(props, propName, componentName) {
const prop = props[propName];
if (prop !== null &&
typeof prop !== 'string' &&
!(typeof prop === 'object' && prop.id && prop.defaultMessage)) {
return new Error(
`Invalid prop \`${propName}\` supplied to ${componentName}. Validation failed.`
);
}
},
};