【React+ts】 react项目中引入bootstrap、ts中的接口

一、在react项目中引入bootstrap

这个直接用npm下载包然后在index.js中引入就可以了。

npm install bootstrap react-bootstrap

后面那个必须要下载，应该有什么联动的包要用。
然后在index.tsx中引入

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap";

二、ts中的interface接口

2.1 对象类型接口

ts中的interface是用来描述对象或函数的。是一种代码协作必须遵守的契约。我的理解就是规范里面的数据，比如说，在实例化的时候哪些东西必须要，哪些东西可以不要，以及哪些东西可以任意类型。
里面的数据可以定义以下几种类型。

1. 确定类型：必须要有的数据。
2. 可选属性：可以没有的属性。
3. 任意属性：说明属性类型可以更改，名字可定义。
4. 只读属性：实例化后不可更改。

interface Person {
   
    age: number,           // 确定属性
    name?: string,         // 可选属性（加问号即可）
    [propName: string]: any, // 任意属性
    readonly sex: string,  // 只读属性
}

2.2 函数类型接口

列出参数列表和返回值类型的定义。

// 函数类型接口
interface Func {
   
    // 定义接收两个必选 number 类型参数，和一个可选字符串参数 desc，该函数返回 number 类型
    (x: number, y: number, desc?: string): number
}

三、react中定义组件的方式

有两种定义组件方式，一种是函数式组件，一种是类式组件。

3.1函数式组件

//基本定义方式
import React from "react";
 
export default function Discovery() {
   
  return <div>发现页</div>;
}

//组件传参数
import React from "react";
 
export default function Discovery(props: any) {
   
  console.log(props);
  return <div>{
   props.text}</div>;
}


//类型定义，说明是个函数式组件也可以简写FC
import React, {
    memo } from "react”;
Import type {
   FunctionComponent} from "react”;
 
const Discovery: FunctionComponent<any> = (props) => {
   
  console.log(props);
  return <div>{
   props.text}</div>;
};

//memo函数的作用是判断组件是否发生变化，如果没有发生变化则不重新渲染
export default memo(Discovery);

3.2 类式组件

//基本定义方式
import React, {
    Component } from "react";
 
class Discovery