如何解决如何使用 Typescript 在 React 错误边界中允许回退道具?
我的应用程序顶部有一个错误边界。它有效,我可以将自定义组件作为后备传递给它。但是,Typescript 声称:
属性 'fallback' 在类型 'Readonly & Readonly' (errorboundary.js)
还有那个
没有与此调用匹配的过载。 (index.tsx)
import { Component } from "react";
export class ErrorBoundary extends Component {
state = { error: null };
static getDerivedStateFromError(error) {
return { error };
}
render() {
if (this.state.error) {
return this.props.fallback;
}
return this.props.children;
}
}
如何解决这个问题?
请注意,我没有使用 react-error-boundary 库。本机错误边界类应该可以完成这项工作。
编辑:完整的工作代码:
interface Props {
fallback: React.ReactNode;
}
export class ErrorBoundary extends Component<Props> {
state = { error: null };
static defaultProps: Props = {
fallback: [],};
static getDerivedStateFromError(error) {
return { error };
}
render() {
if (this.state.error) {
return this.props.fallback;
}
return this.props.children;
}
}
解决方法
你应该扩展 Component
传递你的 props 的类型定义,像这样:
interface ErrorBoundaryProps {
fallback: JSX.Element; // if fallback is a JSX.Element
}
interface ErrorBoundaryState {
error: boolean | null;
}
export class ErrorBoundary extends React.Component<ErrorBoundaryProps,ErrorBoundaryState> { ... }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。