欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React.FC和React.ReactNode和JSX.Element和React.ReactNode的区别与使用

程序员文章站 2022-07-02 19:19:50
...

一、React.FC
用React.FC可以在组件中改变state的值

import React, { useState } from 'react';

export interface UserProps {
  updateModalVisible: boolean;
}

const User: React.FC<UserProps> = () => {
  let [count, setCount] = useState(4);

  const changeVal = () => {
    count++;
    setCount(count);
  };
  return <div style={{ padding: 20 }}>
    <h1>User页面</h1>
    <h2>{count}</h2>
    <button onClick={changeVal}>改变我的值</button>
  </div>;
};
export default User


二、React.ReactElement
ReactElement is an object with a type and props.
ReactElement 是一个有type和props的对象.
被createElement函数调用,根据环境设置对应的属性

export interface AvatarListProps {
  Item?: React.ReactElement<AvatarItemProps>;
  size?: SizeType;
  maxLength?: number;
  excessItemsStyle?: React.CSSProperties;
  style?: React.CSSProperties;
  children: React.ReactElement<AvatarItemProps> | React.ReactElement<AvatarItemProps>[];
}

三、JSX.Element
JSX.Element = ReactElement
JSX.Element-> React.createElement的返回值

class Class implements  JSX.Element {
  // @ts-ignore
  key: React.Key | null | undefined;
  props: any;
  type: any;
}

四、React.ReactNode
ReactNode 可以是 ReactElement, ReactFragment, string ,a number 或者一个数组 ReactNodes, 或者null,或者 undefined, 或者 a boolean:
React.ReactNode->组件的返回值
render(): ReactNode;