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

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

  •  1
     
  •   chenliangngng · 2020-11-29 15:31:04 +08:00 via Android · 3191 次点击
    这是一个创建于 1216 天前的主题,其中的信息可能已经有所发展或是发生改变。
    React.FC,React.Element,React.Node 的本质区别是什么呢?
    我一般用 React.Element,但是看其他人(团队其他所有人)都是用的 FC 和 Node
    8 条回复    2020-11-30 10:16:46 +08:00
    joesonw
        1
    joesonw  
       2020-11-29 16:16:05 +08:00
    React.ReactNode 含 React.ReactElement
    yuang
        2
    yuang  
       2020-11-29 16:47:58 +08:00
    JSX.Element
    yuang
        3
    yuang  
       2020-11-29 16:49:47 +08:00   ❤️ 2
    tikazyq
        4
    tikazyq  
       2020-11-29 17:38:00 +08:00   ❤️ 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  
    OP
       2020-11-29 22:49:17 +08:00 via Android
    @yuang 3#
    @tikazyq 4#
    那使用 React.element 没有任何问题对吧?
    请问又为什么要用 fc 呢?仅仅是为了区别 React.Component 吗
    geekrainy
        6
    geekrainy  
       2020-11-30 00:12:54 +08:00   ❤️ 1
    React.FC 包含了 PropsWithChildren 的泛型,不用显式的声明 props.children 的类型,ReactNode 和 ReactElement 一般用在通过其他 props 传递组件的情形,手动声明。
    weixiangzhe
        7
    weixiangzhe  
       2020-11-30 09:13:39 +08:00
    funnyecho
        8
    funnyecho  
       2020-11-30 10:16:46 +08:00   ❤️ 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;
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5441 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 07:39 · PVG 15:39 · LAX 00:39 · JFK 03:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.