我应该为这个 Typescript 组件使用什么道具和接口？

Question

我正在尝试使用ErrorBoundary组件在 Typescript 中制作错误捕捉器。 坦率地说，我不明白我应该使用什么props和interface属性来实现与我现在正在学习的 ZTM 课程中的任务相同的目标。 原始任务在 Javascript，但我的目标是在 Typescript 中制作相同的应用程序，而不使用any类型。

我的render()方法带有一个自定义的ErrorBoundary标记，当这些错误发生在我的CardList组件中时，它应该可以捕获错误。 render()的代码如下：

render() {
    const { robots, searchfield } = this.state;
    const fileteredRobots = robots.filter(robot => {
        return robot.name.toLowerCase().includes(searchfield.toLowerCase())
    })
    return !robots.length ?
        <h1>Loading</h1> :
        (
            <div className='tc'>
                <h1 className='f1'>RoboFriends</h1>
                <SearchBox title='search box' searchChange={this.onSearchChange}/>
                <ErrorBoundary title='error catcher'>
                    <Scroll title='scrolling'>
                    <CardList title='list of robot cards' robots={fileteredRobots} />
                    </Scroll>
                </ErrorBoundary>
            </div>
        );
    }

此代码块中出现的错误说明如下：

Type '{ children: Element; title: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ErrorBoundary> & Readonly<{ title: string; }>'.
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ErrorBoundary> & Readonly<{ title: string; }>'.ts(2322)

ErrorBoundary.tsx中组件ErrorBoundary的代码如下：

import { Component } from "react";

interface IErrorBoundaryProps {
    hasError: boolean;
    children?: JSX.Element | JSX.Element[];
}

class ErrorBoundary extends Component<{title:string}, IErrorBoundaryProps> {
    constructor(props: {title:string}) {
        super (props)
        this.state = {
            hasError: false,
        }
    }

    render () {
        if (this.state.hasError) {
            return <h1>Ooops. That is an Error</h1>
        }
        return this.state.children
    }
}

export default ErrorBoundary

我修复了ErrorBoundary组件的一些错误，但是我的App.tsx render()方法中仍然出现上述错误。

我的主要问题是：如何修复我的render()方法中发生的错误？

Answer 1

这里发生了几件事。

1. 你混淆了 props 和 state。你的title和children是props ； hasError是 state。但是您在一种类型中有title ，在另一种类型中有hasError和children ，并且您使用了IErrorBoundaryProps类型，其中需要state类型参数。

2. React 组件ReactNode children

这是一个没有错误的精简版本：

import React, { Component, ReactNode } from "react";

interface IErrorBoundaryProps {
    title: string;
    children?: ReactNode;
}

interface IErrorBoundaryState {
    hasError: boolean;
}

// This one is props −−−−−−−−−−−−−−−−−vvvvvvvvvvvvvvvvvvv
class ErrorBoundary extends Component<IErrorBoundaryProps, IErrorBoundaryState> {
// This one is state −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^
    constructor(props: { title: string }) {
        super(props);
        this.state = {
            hasError: false,
        };
    }

    render() {
        if (this.state.hasError) {
            return <h1>Ooops. That is an Error</h1>;
        }
        return this.props.children; // ** Use `props` here
    }
}

class Example extends Component {
    render() {
        return (
            <ErrorBoundary title="error catcher">
                <div>Error stuff here</div>
            </ErrorBoundary>
        );
    }
}

游乐场链接

另外，请注意你的ErrorBoundary组件还不是错误边界，因为它没有实现static getDerivedStateFromError()或componentDidCatch() ，但我猜你稍后会添加它......