reactjs - ReactDOM.render 中传递的组件参数类型是什么?
问题描述
我正在尝试编写一个函数来帮助测试每个组件。
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 警告的情况下修复它?谢谢
解决方案
对不起,我错过了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);
}
推荐阅读
- rust - 我如何控制一个 8x8 LED 矩阵显示器 Max7219 和一个生锈的树莓派?
- javascript - 我想将一个 div innerHtml 发送到另一个页面 div 以添加到购物车
- python - 数据框不合并,但使用 pandas python 连接
- c++ - UDP 套接字接收意外 IPv6 多播组的数据报
- tensorflow - 与自己的预测一起使用时,时间序列预测的预测很糟糕
- django - DRY-rest-permissions 不检查我的对象权限,除了全局权限
- powerbi - 将 Power Bi 表和关系导入到电源应用
- javascript - 在字符串中搜索不同的单词
- javascript - Ajax 将带有两个数组的 JSON 对象发送到一个 servlet,并在没有 jQuery 的情况下在 java servlet 中进行解析
- javascript - 如何根据需要格式化数组数组的值?