V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
React
chenliangngng
V2EX  ›  React

请教一下 react 的 tsx 怎么写类型定义?

  •  1
     
  •   chenliangngng · 51 天前 via Android · 1425 次点击
    这是一个创建于 51 天前的主题,其中的信息可能已经有所发展或是发生改变。
    React.FC,React.Element,React.Node 的本质区别是什么呢?
    我一般用 React.Element,但是看其他人(团队其他所有人)都是用的 FC 和 Node
    8 条回复    2020-11-30 10:16:46 +08:00
    joesonw
        1
    joesonw   51 天前
    React.ReactNode 含 React.ReactElement
    yuang
        2
    yuang   51 天前
    JSX.Element
    yuang
        3
    yuang   51 天前   ❤️ 2
    tikazyq
        4
    tikazyq   51 天前   ❤️ 1
    React.FC = Functional Component 函数组件
    React.ReactElement = Native DOM Element / User Defined Component 原生 DOM 元素 / 用户自定义元素
    React.ReactNode = Any possible type of React node 所有可能的 React 节点 = 原生 JS 类型 + 原生 DOM 元素 + 用户自定义元素

    简单来说,不知道用什么组件类型时,就用 React.FC
    chenliangngng
        5
    chenliangngng   51 天前 via Android
    @yuang 3#
    @tikazyq 4#
    那使用 React.element 没有任何问题对吧?
    请问又为什么要用 fc 呢?仅仅是为了区别 React.Component 吗
    geekrainy
        6
    geekrainy   51 天前   ❤️ 1
    React.FC 包含了 PropsWithChildren 的泛型,不用显式的声明 props.children 的类型,ReactNode 和 ReactElement 一般用在通过其他 props 传递组件的情形,手动声明。
    funnyecho
        8
    funnyecho   50 天前   ❤️ 1
    可以参考 @types 中的定义: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/4a1e6b12938de49594f8eba59ad1b1f19d6478c4/types/react/index.d.ts#L237

    React.Element 可以看作是 React 组件的基类型。

    我自己实际使用中,很少会用 React.Element 。

    如果定义 functional component,就用 React.FC<T>。

    React.Node 用于外部组件的输入(比如 props ),因为 React.Node 个人感觉类似与 any 的组件类型,它几乎包含了 React 所支持的所有组件类型:
    type ReactNode = ReactElement | ReactNodeArray | string | text | boolean | null | undefined;
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3072 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 18ms · UTC 00:50 · PVG 08:50 · LAX 16:50 · JFK 19:50
    ♥ Do have faith in what you're doing.