react的组件和元素的类型总结

先来一小段代码

const Demo = <div>Demo</div>

const App = () => {
   
  return (
    <div>
      <Demo></Demo>
    </div>
  );
}

不知道这段代码大家会不会发现是错误的，这里的Demo 是一个JSX，并不是一个组件，所有不能使用<Demo />这种方式内嵌到其他组件中，正确的方式应该是

const Demo = <div>Demo</div>

const App = () => {
   
  return (
    <div>
      {
    Demo }
    </div>
  );
}

再来看一个例子

const Demo = ({
    children}) => <div>{
   children}</div>

const App = () => {
   
  return (
    <div>
      <Demo>Demo</Demo>
    </div>
  );
}

这里的const Demo = ({children}) => <div>{children}</div>中的children也是渲染一个JSX，所以使用花括号的方式渲染，也就是{children}。

总结一下

如果是JSX，使用花括号的方式渲染
如果是组件，使用尖括号包裹渲染

我们再来看一下组件类型。

其实React中描述组件类型有很多方式，刚开始的时候还是很容易迷惑的。例如：

import React, {
    ComponentType, FunctionComponent } from "react"

const App:React.FC<any> = () => {
   
  return (
    <div>
      Demo
    </div>
  );
}

const App:ComponentType<any> = () => {
   
  return (
    <div>
      Demo
    </div>
  );
}

const App:FunctionComponent<any> = () => {
   
  return (
    <div>
      Demo
    </div>
  );
}

const App:() => JSX.Element = () => {
   
  return (
    <div>
      Demo
    </div>
  );
}

上面这几种定义组件的方式都不会报错。并且都是正确的方式，我们平时大概都用React.FC。

其实这几种方式都有很强的关系，不是超集，就是子集。我们把他们的定义找到，来看一下：

React.FC

type FC<P = {
    }> = FunctionComponent<P>;

ComponentType

 type ComponentType<P = {
    }> = ComponentClass<P> | FunctionComponent<P>;

FunctionComponent

  interface FunctionComponent<P = {
    }> {
   
        (props: P, context?: any): ReactNode;
        propTypes?: WeakValidationMap<P> | undefined;
        contextTypes?: ValidationMap<any> | undefined;
        defaultProps?: Partial<P> | undefined;
        displayName?: string | undefined;
    }

JSX

declare global {
   
    /**
     * @deprecated Use `React.JSX` instead of the global `JSX` namespace.
     */
    namespace JSX {
   
 		interface Element extends React.ReactElement<any, any> {
   }
 		// .....
 		// 这里省略一些其他类型
}

   interface ReactElement<
        P = any,
        T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>,
    > {
   
        type: T;
        props: P;
        key: string | null;
    }

ReactNode

     type ReactNode =
        | ReactElement
        | string
        | number
        | Iterable<ReactNode>
        | ReactPortal
        | boolean
        | null
        | undefined
        | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[
            keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES
        ];

这里可以发现React.FC其实就是FunctionComponent，ComponentType是ComponentClass和FunctionComponent的集合，而FunctionComponent的函数表达类型是 (props: P, context?: any): ReactNode;，然后ReactNode是一个联合类型，其中的一个类型就是ReactElement

分析到这里，我们再来看一下JSX.Element，JSX.Element继承至React.ReactElement。

所以到这里，这4个类型都有所关联，这里有一些绕。这里只是想说，如果以后看到这些类型，希望能不会那么困惑。

还有一个小注意点，类似于vue的插槽吧，来看一个demo

import {
    ComponentType, FunctionComponent, ReactNode } from "react"

type DemoProps = {
   
	children: ReactNode 
}

const Demo: React.FC<DemoProps> = ({
   children}) => <div>{
   children}</div>

const App = () => {
   
  return (
    <div>
      <Demo>Demo</Demo>
    </div>
  );
}

这里我们声明组件Demo的children类型是ReactNode，或者你定义成JSX.Element类型也可以，不过需要注意的是JSX.Element类型的范围更小。