如何使用 Typescript 在 React 错误边界中允许回退道具？

Question

我的应用程序顶部有一个错误边界。它有效，我可以将自定义组件传递给它作为后备。但是，Typescript 声称：

Property 'fallback' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' (errorboundary.js)

还有那个

No overload matches this call. (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 库。本机错误边界 class 应该可以完成工作。

编辑：完整的工作代码：

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;
  }
}

Answer 1

您应该扩展 Component 传递道具的类型定义，如下所示：

interface ErrorBoundaryProps {
  fallback: JSX.Element; // if fallback is a JSX.Element
}

interface ErrorBoundaryState {
  error: boolean | null;
}

export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> { ... }

如何使用 Typescript 在 React 错误边界中允许回退道具？

How to allow fallback prop in React error boundary with Typescript?

typescript

reactjs

react-error-boundary