函数式组件与类组件

使用起来没什么不同，只是在创建的时候稍有区别
robot函数式组件：

import React from "react";
import styles from "./robot.module.css"

interface RobotProps {
  id: number;
  name: string;
  email: string;
}
// 定义Robot为函数组件，泛型类型，可写为{props},propt用来传递数据，此处使用解构赋值直接展开数据{ id, name, email }
const Robot: React.FC = ({ id, name, email }) => {
  return (
    

      
      
{name}
      
{email}
    
  );
};

export default Robot;

ShoppingCard类组件

import { render } from "@testing-library/react";
import React from "react";
import { isPropertySignature } from "typescript";
import styles from "./ShoppingCart.module.css"
interface Props { }
interface State {
    isOpen: boolean;
}
//  创建class类组件，继承React.Component类,传入参数Props, State
class ShoppingCart extends React.Component{
    constructor(props: Props) {
        super(props);
        this.state = {
            isOpen: false
        }
    }

    render() {
        return (
            

                 {
                    this.setState({ isOpen: !this.state.isOpen })
                }}>
                    购物车2（件）
                
                

                    

                        
robot1
                        
robot2
                    
                
            
        )
    }

}

export default ShoppingCart