reactjs - 如何在 Typescript 中正确键入 React ErrorBoundary 类组件?
问题描述
这是我目前关于如何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(错误,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;
}
解决方案
您将在文件中获得所有index.d.ts
答案@types/react
。如果您使用的是 VSCode 之类的 IDE,您可以按住 Ctrl 键并单击一个类型以直接转到其定义。
这是您问题的准确答案,但在此之前,让我建议您更喜欢使用反应hooks
而不是类。
由 OP 编辑:我从不使用类组件,总是更喜欢函数和钩子,但来自错误边界上的 React文档:
错误边界的工作方式类似于 JavaScript catch {} 块,但适用于组件。只有类组件可以是错误边界。
我给出的行是index.d.ts
版本 16.9.49 中的行。
A 部分:是的,就是这样做的。
B 部分:正如您在第 658 行看到的,error
是类型any
,返回类型是state
or的一部分null
。
C 部分:在第 641 行,您将看到错误是类型Error
,返回类型是void
。
D 部分:在第 494 行,您可以看到渲染应该返回一个ReactNode
...</p>
推荐阅读
- kotlin - 使用服务器端事件的 JAX-RS 客户端在未完成的情况下打印相同的项目
- c++ - 如何改进 C++ 中以下代码的 UML 建模?
- python - 按下按钮 tkinter Python 后打开一个新窗口
- regex - 用于转换路径图的正则表达式
- excel - VBA数据透视表过滤器.ClearAllFilters而不替换下面的数据
- sql - 命名实例和默认实例有什么区别?
- c# - 在UWP中的列表中显示列表中的列表
- angular - 如何通过循环动态调用函数?
- c# - 将 RijndaelManaged 解密从 C# 重写为 Python
- javascript - 如何在不改变原始数组的情况下破坏对象属性?