react+ts 学习记录一

最新推荐文章于 2024-04-17 10:47:21 发布

Kratial

最新推荐文章于 2024-04-17 10:47:21 发布

阅读量695

点赞数

文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/Kratial/article/details/129745098

版权

创建成功的目录

在这里插入图片描述

demo报错信息整理

在这里插入图片描述
解决方案：
变成import ContentPage from './others/content’即可

报错二：this.state的属性报错=》类型“Readonly<{}>”上不存在属性“collapsed”
在这里插入图片描述
解决办法

这里有一个内容需要注意

React.Component有两个可选的参数分别为props和state（React.Component<PropsType,StateType>)

报错三：Cannot invoke an object which is possibly ‘undefined’.
在这里插入图片描述
解决方案：加上判断即可

在这里插入图片描述

报错四：Could not find a declaration file for module ‘react-router-dom’

解决方案：安装ts支持的react-router-dom （这里我用的是版本5）
yarn add @types/react-router-dom@5

报错五：
在这里插入图片描述

第一步npm run eject展示webpack的配置

第二步在webpack.config.js中添加如下配置

在这里插入图片描述

解决方法：

至此 demo初始化已完成，效果展示如下
在这里插入图片描述

demo 实例中的一些介绍

1.react-router-dom的简单应用

import { Component, ReactNode } from "react";
import {BrowserRouter as Router,Route} from 'react-router-dom'
import App from '../App'
class Routers extends Component<any,any>{
    constructor(props:any) {
        super(props)
    }
    render(): ReactNode {
        return(
            <Router>
                <Route path="/" component={App}/>
            </Router>
        ) 
    }
}
export default Routers

由于本案例使用的react版本低于18,故而入口文件有所调整

import ReactDOM from 'react-dom'
// import ReactDOM from 'react-dom/client';
import './index.css';
import Routers from './routers';
// import reportWebVitals from './reportWebVitals';

// const root = ReactDOM.createRoot(
//   document.getElementById('root') as HTMLElement
// );
// root.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>
// );
// 当react版本低于18时使用如下方式
ReactDOM.render(
  <Routers/>,
  document.getElementById('root') as HTMLElement
)