如何在Typescript中正确键入React ErrorBoundary类组件?

cbdeveloper

这是我目前在如何ErrorBoundary在Typescript中正确键入React类组件的尝试:

import React from "react";
import ErrorPage from "./ErrorPage";
import type { Store } from "redux";   // I'M PASSING THE REDUX STORE AS A CUSTOM PROP

interface Props {
  store: Store         // THIS IS A CUSTOM PROP THAT I'M PASSING
}

interface State {      // IS THIS THE CORRECT TYPE FOR THE state ?
  hasError: boolean
}

class ErrorBoundary extends React.Component<Props,State> {
  
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error): State {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo: React.ErrorInfo): void {
    // You can also log the error to an error reporting service
    // logErrorToMyService(error, errorInfo);
    console.log("error: " + error);
    console.log("errorInfo: " + JSON.stringify(errorInfo));
    console.log("componentStack: " + errorInfo.componentStack);
  }

  render(): React.ReactNode {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return(
        <ErrorPage
          message={"Something went wrong..."}
        />
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

这个问题是关于这个ErrorBoundary类组件的类型的我将其分成几部分以使其更容易。


A部分:道具和状态的类型

我在做什么对吗?

interface Props {
  store: Store         // THIS IS A CUSTOM PROP THAT I'M PASSING
}

interface State {      // IS THIS THE CORRECT TYPE FOR THE state ?
  hasError: boolean
}

class ErrorBoundary extends React.Component<Props,State> {}

B部分:getDerivedStateFromError(错误)

我应该为error参数选择哪种类型返回类型应该是State类型,对吗?

static getDerivedStateFromError(error): State {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

C部分:componentDidCatch(error,errorInfo:React.React.ErrorInfo)

我应该为error参数选择哪种类型对于errorInfo,React的ErrorInfo类型确实正确。是吗?返回类型应该是void,正确吗?

componentDidCatch(error, errorInfo: React.ErrorInfo): void {
    console.log("error: " + error);
    console.log("errorInfo: " + JSON.stringify(errorInfo));
    console.log("componentStack: " + errorInfo.componentStack);
}

D部分:render()方法

返回类型应该是ReactNode吗?

render(): React.ReactNode {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return(
        <ErrorPage
          message={"Something went wrong..."}
        />
      );
    }

    return this.props.children;
  }
斯蒂芬·维特(Stephane Veyret)

您将获得该文件中所有的答案index.d.ts@types/react如果使用的是类似VSCode的IDE,则可以按住Ctrl键并单击某个类型以直接转到其定义。

这是对您问题的精确答案,但是在此之前,让我建议您更喜欢使用reacthooks而不是class。


OP的编辑:我从不使用类组件,总是喜欢使用函数和钩子,但是从React docs上的Error Boundaries出发

错误边界的工作方式类似于JavaScript catch {}块,但对于组件而言。只有类组件才能成为错误边界。


我给出的内容是index.d.ts16.9.49版中的内容。

A部分:是的,就是这样。

B部分:如您在658行所见error,类型为any,返回类型为state或的一部分null

C部分:在第641行,您将看到error是类型,Error而return类型是void

D部分:在494行,您可以看到render应该返回一个ReactNode

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在react-router中正确键入组件属性?

来自分类Dev

如何测试ErrorBoundary的后备组件?

来自分类Dev

如何在React App中正确导入组件?

来自分类Dev

如何在Typescript中正确键入应用程序状态?

来自分类Dev

如何在新类(扩展组件)格式中正确格式化 JSX

来自分类Dev

如何在React功能组件中正确使用键?这是我的喜欢按钮:

来自分类Dev

如何在React功能组件中正确设置setInterval计时器?

来自分类Dev

如何在自己的文件中的React Native中正确实现自定义组件?

来自分类Dev

如何在功能组件中使用React Typescript键入任何参数

来自分类Dev

Ember.js如何在组件中正确过滤模型

来自分类Dev

如何在Nuxt组件中正确放置Google登录代码

来自分类Dev

如何在子组件中正确调用传递的函数

来自分类Dev

TypeScript-我应该如何键入这些React组件?

来自分类Dev

如何在类库中正确调用P / Invoke方法?

来自分类Dev

如何在Grails域类中正确设置属性值

来自分类Dev

如何在Pygame中正确继承Surface类

来自分类Dev

如何在类中正确要求Electron BrowserWindow

来自分类Dev

如何在Perl类中正确使用哈希

来自分类Dev

PHP如何在类中正确移动函数

来自分类Dev

如何在ref类中正确存储HWND?

来自分类Dev

如何在 PHP 的类中正确构造数组?

来自分类Dev

如何在我的项目中正确加载 Python 类?

来自分类Dev

如何在React Native中正确使用仅iOS组件而不会在Android中出现错误

来自分类Dev

如何在React Native中正确使用仅iOS组件而不会在Android中出现错误

来自分类Dev

如何在TypeScript中使用类键入数组?

来自分类Dev

如何在React中测试类组件

来自分类Dev

键入没有属性的React组件类的正确方法是什么?

来自分类Dev

如何在TypeScript中的包装的addEventListener调用中正确键入事件处理程序

来自分类Dev

如何在React与TypeScript中正确使用useState钩子?

Related 相关文章

  1. 1

    如何在react-router中正确键入组件属性?

  2. 2

    如何测试ErrorBoundary的后备组件?

  3. 3

    如何在React App中正确导入组件?

  4. 4

    如何在Typescript中正确键入应用程序状态?

  5. 5

    如何在新类(扩展组件)格式中正确格式化 JSX

  6. 6

    如何在React功能组件中正确使用键?这是我的喜欢按钮:

  7. 7

    如何在React功能组件中正确设置setInterval计时器?

  8. 8

    如何在自己的文件中的React Native中正确实现自定义组件?

  9. 9

    如何在功能组件中使用React Typescript键入任何参数

  10. 10

    Ember.js如何在组件中正确过滤模型

  11. 11

    如何在Nuxt组件中正确放置Google登录代码

  12. 12

    如何在子组件中正确调用传递的函数

  13. 13

    TypeScript-我应该如何键入这些React组件?

  14. 14

    如何在类库中正确调用P / Invoke方法?

  15. 15

    如何在Grails域类中正确设置属性值

  16. 16

    如何在Pygame中正确继承Surface类

  17. 17

    如何在类中正确要求Electron BrowserWindow

  18. 18

    如何在Perl类中正确使用哈希

  19. 19

    PHP如何在类中正确移动函数

  20. 20

    如何在ref类中正确存储HWND?

  21. 21

    如何在 PHP 的类中正确构造数组?

  22. 22

    如何在我的项目中正确加载 Python 类?

  23. 23

    如何在React Native中正确使用仅iOS组件而不会在Android中出现错误

  24. 24

    如何在React Native中正确使用仅iOS组件而不会在Android中出现错误

  25. 25

    如何在TypeScript中使用类键入数组?

  26. 26

    如何在React中测试类组件

  27. 27

    键入没有属性的React组件类的正确方法是什么?

  28. 28

    如何在TypeScript中的包装的addEventListener调用中正确键入事件处理程序

  29. 29

    如何在React与TypeScript中正确使用useState钩子?

热门标签

归档