const childElement = child as FunctionComponentElement<MenuItemProps>

来源：6-7 功能继续升级 - SubMenu 下拉菜单编码第一部分

Nikola_shawn_7491

2022-02-15

6-7节中为什么要断言成 FunctionComponentElement 为啥不能断言成 ReactElement

写回答

1回答

张轩

2022-02-16

同学你好

FunctionComponentElement 就是继承自 ReactElement, 但是确定了第二个泛型的类型。

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
    type: T
    props: P;
    key: Key | null;
}
// 多个 ref 属性，以及直接确定了 T 泛型的类型为 FunctionComponent
interface FunctionComponentElement<P> extends ReactElement<P, FunctionComponent<P>> {
    ref?: 'ref' extends keyof P ? P extends { ref?: infer R } ? R : never : never;
}
// 如果在代码中使用的是 ReactElement
const childElement = child as React.ReactElement<MenuItemProps>
// 这行就报错了，因为 type 是个联合类型，你要手动传入正确的类型
const { displayName } = childElement.type

// 所以 FunctionComponentElement 更方便，更简单，更形象（我们的 childElement 这里就是个 Function 返回的结果）

React18+TS高仿AntD从零到一打造组件库

设计，开发，测试，发布再到 CI/CD，从0到1造轮子

2136 学习 · 959 问题

查看课程

相似问题

关于renderChildren中的displayName问题

回答 2

老师您好

回答 1

测试 Icon 组件的 onClick 事件是否执行应该怎么写？

回答 1

fetchSuggestions这个方法怎么监听啊？

回答 1

menu运行pnpm jest时，提示menu.tsx文件中定义的IMenuContext is not defined

回答 1

打开慕课网App查看更多内容