ReactDOM.render 中传递的组件参数类型是什么？

Question

我正在尝试编写一个函数来帮助测试每个组件。

function testComponent(component: any): void {
  const div = document.createElement('div');
  ReactDOM.render(component, div);
  ReactDOM.unmountComponentAtNode(div);
}

运行 lint 时，我收到了来自 typescript-eslint 的警告。

警告 任何意外。指定不同的类型 @typescript-eslint/no-explicit-any

所以我试着看看ReactDOM.render 中传递了什么，这里是

export interface Renderer {
    // Deprecated(render): The return value is deprecated.
    // In future releases the render function's return type will be void.

    <T extends Element>(
        element: DOMElement<DOMAttributes<T>, T>,
        container: Element | null,
        callback?: () => void
    ): T;

    (
        element: Array<DOMElement<DOMAttributes<any>, any>>,
        container: Element | null,
        callback?: () => void
    ): Element;

    (
        element: SFCElement<any> | Array<SFCElement<any>>,
        container: Element | null,
        callback?: () => void
    ): void;

    <P, T extends Component<P, ComponentState>>(
        element: CElement<P, T>,
        container: Element | null,
        callback?: () => void
    ): T;

    (
        element: Array<CElement<any, Component<any, ComponentState>>>,
        container: Element | null,
        callback?: () => void
    ): Component<any, ComponentState>;

    <P>(
        element: ReactElement<P>,
        container: Element | null,
        callback?: () => void
    ): Component<P, ComponentState> | Element | void;

    (
        element: ReactElement[],
        container: Element | null,
        callback?: () => void
    ): Component<any, ComponentState> | Element | void;
}

打字有点大，找不到可以直接替换any的类型。

我试过 Component，但它在我的 IDE 上给出了这个警告

'Component' 类型的参数不可分配给 'TractElement 类型的参数 ReactElement 组件）> |空） | (new (props: any) => 组件)>[]'.

是否有这样的类型或其他方法可以在不忽略 lint 警告的情况下修复它？谢谢

Answer 1

对不起，我错过了ReactElement。

我本来以为应该是Component这个类型，因为我传入了一个组件。原来是ReactElement。

import { ReactElement } from 'react';

function testComponent(component: ReactElement): void {
  const div = document.createElement('div');
  ReactDOM.render(component, div);
  ReactDOM.unmountComponentAtNode(div);
}