如何解决与 Redux (mapStateToProps) 连接的 ErrorBoundary 组件上的 TypeScript 错误
我在 React/ErrorBoundary 组件上遇到了类型问题,指出 类型为“typeof ErrorBoundary”的参数不可分配给类型为“ComponentType的参数从不 >'。
澄清一下:我使用 mapStatetoProps 将其与商店中设置的用户语言首选项相关联。
这是我的组件
interface ErrorTexts {
texts: ErrorTextType;
}
interface Props {
children: ReactNode | ReactNode[];
texts: ErrorTextType;
}
interface State {
error: Error | null;
}
class ErrorBoundary extends Component<Props,State> {
static propTypes = {
children: node,texts: errorTextsPropType
};
static defaultProps = {
children: null,texts: defaultTexts.en.error
};
state: State = {
error: null
};
static getDerivedStateFromError(error: Error): State {
return { error };
}
componentDidCatch(error: Error,errorInfo: ErrorInfo) {
console.error('Something unexpected had happened',error,errorInfo);
}
render() {
const { error }: { error: Error | null } = this.state;
const { texts }: ErrorTexts = this.props;
if (error) {
return <ErrorComponent error={error.message} texts={texts} />;
}
return this.props.children;
}
}
const mapStatetoProps = (state: AppState): ErrorTexts => ({
texts: state.texts.error
});
export default connect(mapStatetoProps)(ErrorBoundary);
作为参考,这些是我导入的 ErrorText 类型:
export interface ErrorTextType {
errorLine1: string;
errorLine2: string;
notifyMe: string;
title: string;
}
export const errorTextsPropType = shape({
errorLine1: string.isrequired,errorLine2: string.isrequired,notifyMe: string.isrequired,title: string.isrequired
});
因此,在母组件上,我遇到了一个错误这个 JSX 标签的“children”属性需要一个类型为“never”的子元素,但提供了多个孩子。
有关如何解决此问题的任何想法? :/
解决方法
不要单独编写接口 Props
,而是使用 InferProps
泛型来推断 prop 类型:
import PropTypes,{ shape,InferProps} from "prop-types";
class ErrorBoundary extends Component<InferProps<typeof ErrorBoundary.propTypes>,State> {
static propTypes = {
children: PropTypes.node,texts: errorTextsPropType,};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。