0

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

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<{}, {}, any>' 类型的参数不能分配给 'TreactElement ReactElement Component) 类型的参数> | 空） | （新的（道具：任何）=> 组件）>[]'。

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

4

1 回答 1

0

对不起，我错过了ReactElement。

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

import { ReactElement } from 'react';

function testComponent(component: ReactElement): void {
  const div = document.createElement('div');
  ReactDOM.render(component, div);
  ReactDOM.unmountComponentAtNode(div);
}
于 2019-08-26T09:08:04.043 回答