1、初始安装react+ts
npx create-react-app my-app
npx create-react-app react-ts --template typescript 安装为ts
2、安装好react 后面加上ts
2.1 tsc --init 生产tsconfig.js
{ "compilerOptions": { "target": "es5" /**指定ECMAScript目标版本**/, "module": "commonjs" /**指定生成哪个模块系统代码**/, "allowJs": true /**允许编译js文件**/, "jsx": "preserve" /**支持JSX**/, "outDir": "build" /**编译输出目录**/, "strict": true /**启用所有严格类型检查选项**/, "noImplicitAny": false /**在表达式和声明上有隐含的any类型时报错**/, "skipLibCheck": true /**忽略所有的声明文件的类型检查**/, "forceConsistentCasingInFileNames": true /**禁止对同一个文件的不一致的引用**/, "baseUrl": "./", "paths": { "@/*": ["src/*"], "@assets/*": ["src/assets/*"], "@components/*": ["src/components/*"], "@pages/*": ["src/pages/*"], "@utils/*": ["src/utils/*"], "@store/*": ["src/store/*"] } }, "include": ["src"] /**指定编译目录**/ }
2.2 引入ts yarn add typescript yarn add @types/react @types/react-dom
2.3 react 里面的文件.js 需要修改为.tsx 包含jsx的都需要改为tsx
3、react 里面的文件.js 需要修改为.tsx
4、安装mobx
yarn add mobx mobx-react-lite
---React Developer Tools安装
---1 下载包 https://www.crx4chrome.com/crx/3068/ 下载crx包
---2 将报的后缀名修改为rar或者zip
---3 解压完成后如下
---4打包完成后在chrome加载已解压的文件
----5加载的文件夹不能删除 删除了插件就找不到了 可以放在一个地方
5、类型断言
JSON.parse(getUserInfo() as string) 用于ts警告报错 6、token持久化配置 存储到localstorage utils/userInfo.js//封装userinfo 存到localstorage
const Key = "userInfo"
//set
const setUserInfo = (userInfo)=> {
return window.localStorage.setItem(Key, userInfo)
}
// get
const getUserInfo = ():string|null=> {
return window.localStorage.getItem(Key)
}
//remove
const removeUserInfo = ()=> {
return window.localStorage.removeItem(Key)
}
export {setUserInfo, getUserInfo, removeUserInfo}
保存的时候
let userInfo = {
token: resp.data.token,
sessionId: resp.sessionId,
username: enterpriseAccount,
relateEnterpriseName: resp.userInfo.enterpriseName,
relateEnterpriseId: resp.userInfo.id,
isSuperAdmin: resp.userInfo.isSuperAdmin,
};
setUserInfo(JSON.stringify(userInfo));
7、组件鉴权 没有token信息就跳转到login
AuthComponent.tsx
//判断用户信息token是否存在
//存在直接渲染
//不存在直接跳转
//AuthComponent 里面加入需要鉴权的组件
import { getUserInfo } from "@/utils/index"
import { Navigate } from "react-router-dom"
function AuthComponent({ children }) {
const userInfo = JSON.parse(getUserInfo() as string);
let token = userInfo ? userInfo.token : '';
if (token !=="") {
return <>{children}</>
} else {
//跳转到登录页
return <Navigate to={"/login"} />
}
}
export { AuthComponent }
使用
/*路有需要鉴权的地方使用*/
<Route path="/" element={
<AuthComponent><Layout /></AuthComponent>
}></Route>
8、ts 设置router index 跳转首页
<Route index element={
<AuthComponent><Home /></AuthComponent>
}></Route>
9、错误信息
Do you need to change your target library? Try changing the 'lib' compiler option to 'es2021' or later.
"compilerOptions": {
"target": "es5" /**指定ECMAScript目标版本**/,
"module": "commonjs" /**指定生成哪个模块系统代码**/,
"allowJs": true /**允许编译js文件**/,
"jsx": "preserve" /**支持JSX**/,
"outDir": "build" /**编译输出目录**/,
"strict": true /**启用所有严格类型检查选项**/,
"noImplicitAny": false /**在表达式和声明上有隐含的any类型时报错**/,
"skipLibCheck": true /**忽略所有的声明文件的类型检查**/,
"forceConsistentCasingInFileNames": true /**禁止对同一个文件的不一致的引用**/,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"@assets/*": ["src/assets/*"],
"@components/*": ["src/components/*"],
"@pages/*": ["src/pages/*"],
"@utils/*": ["src/utils/*"],
"@store/*": ["src/store/*"]
}
},
"lib": [ "dom", "es5", "es2015.promise" ,"es2015", "es2017"],
10、antd menu
菜单点击跳转
const navigate = useNavigate(); //跳转 navigate(key);
菜单点击高亮当前菜单
const [current, setCurrent] = React.useState("/")；
//高亮当前
setCurrent(key)；
<Menu
mode="inline"
defaultSelectedKeys={['/']}
selectedKeys={[current]}
className="layout-menu"
items={MenuList}
onClick={menuClickHandler}
/>
路由刷新高亮菜单
const location = useLocation(); // 获取当前路由 setCurrent(location.pathname)
11、userEffect [] 调用了两次
去掉严格模式
// <React.StrictMode>
<App />
// </React.StrictMode>
12、配置多环境变量
yarn add dotenv-cli 新建env文件 .env & .env.production#REACT_APP开头 REACT_APP_URL = '' REACT_APP_URL_initialize = '' REACT_APP_ENV=productionpackage.json
"start": "craco start", "production": "dotenv -e .env.production craco start", "build": "dotenv -e .env.production craco build",
获取参数
const base_obj = {
base: process.env.REACT_APP_URL,
initialize: process.env.REACT_APP_URL_initialize,
};
13、外部配置路由跳转
1.安装history yarn add history
2.创建history.ts
import { createBrowserHistory } from 'history'
const browserHistory = createBrowserHistory()
export default browserHistory
3.创建自定义路由文件组件CutstomBrowserRouter.tsx
import * as React from "react";
import { Router } from "react-router-dom";
import browserHistory from "@/utils/history";
export default function CustomBrowserRouter({ basename="", children, window="" }) {
let historyRef = React.useRef();
if (historyRef.current == null) {
//@ts-ignore
historyRef.current = browserHistory;
}
let history:any = historyRef.current;
let [state, setState] = React.useState({
action: history.action,
location: history.location,
});
React.useLayoutEffect(() => history.listen(setState), [history]);
return (
<Router
basename={basename}
children={children}
location={state.location}
navigationType={state.action}
navigator={history}
/>
);
}
4.index.tsx使用
import CustomBrowserRouter from "@/components/CutstomBrowserRouter";
<CustomBrowserRouter>
<App />
</CustomBrowserRouter>
把原来的BrowserRouter替换为CustomBrowserRouter
14、类型“JSX.IntrinsicElements”上不存在属性“children”。
//Children 需要大写
function BaseSeacrh({ children }) { return <div className="baseSeacrh"> {<children/>} </div> }
15、路由表配置
router/index.tsx/* eslint-disable import/no-anonymous-default-export */
import * as React from "react";
import { lazy, Suspense, ReactNode, ComponentType, LazyExoticComponent } from "react";
import NotFound from "@/pages/NotFound";
import { AuthComponent } from '@/components/AuthComponent'
interface IRoute {
path: string,
element: ReactNode
children?: IRoute[]
}
function lazyLoad(path: string) {
const Comp: LazyExoticComponent<ComponentType<any>> = lazy(() => import("@/pages/" + path));
return (
<Suspense fallback={<div>加载中……</div>}>
<Comp />
</Suspense>
);
}
const Routers: IRoute[] = [
{
path: "/login",
element: lazyLoad("Login"),
},
{
path: "/",
element: <AuthComponent>{lazyLoad("LayoutView")}</AuthComponent>,
children: [
{
path: "home",
element: lazyLoad("Home"),
},
{
path: "menu",
element: lazyLoad("Menu"),
},
{
path: "role",
element: lazyLoad("Role"),
},
{
path: "user",
element: lazyLoad("User"),
},
{
path: "dict",
element: lazyLoad("Dict"),
},
{
path: "logs",
element: lazyLoad("Logs"),
},
{
path: "module",
element: lazyLoad("Module"),
},
],
},
{
path: "*",
element: <NotFound />,
},
];
export default Routers
使用
index.js / index.jsx
import { BrowserRouter } from 'react-router-dom';
<BrowserRouter>
<App />
</BrowserRouter>
app.js/app.tsx
import { useRoutes } from "react-router-dom";
import "./App.css";
import routes from "@/router"
function App() {
const element = useRoutes(routes);
return (
// <BrowserRouter>
<div className="App">
{/* <Routes> */}
{/* 鉴权 */}
{/* <Route path="/" element={
<AuthComponent><LayoutView /></AuthComponent>
}>
<Route index element={
<AuthComponent><Home /></AuthComponent>
}></Route>
<Route path="/menu" element={
<AuthComponent><Menu /></AuthComponent>
}></Route>
<Route path="/role" element={
<AuthComponent><Role /></AuthComponent>
}></Route>
<Route path="/user" element={
<AuthComponent><User /></AuthComponent>
}></Route>
<Route path="/dict" element={
<AuthComponent><Dict /></AuthComponent>
}></Route>
<Route path="/logs" element={
<AuthComponent><Logs /></AuthComponent>
}></Route>
<Route path="/module" element={
<AuthComponent><Module /></AuthComponent>
}></Route>
</Route>
<Route path="/login" element={<Login />}></Route>
</Routes> */}
{element}
</div>
// </BrowserRouter>
);
}
export default App;
16、and table增加序号
{
title: "序号",
width: 70,
render: (text, record, index) => `${index + 1}`,
},
17、吊用组件函数useRef ref forwardRef useImperativeHandle
const RoleFormComRef = useRef<any>(null) <RoleForm record={record} ref={RoleFormComRef} /> 子组件 需要弹出的方法 function RoleForm({ record }, ref) { useImperativeHandle(ref, () => ({ getTableList, setPage })) } export default forwardRef(RoleForm ) 父组件调用 TableRef?.current?.getTableList() 标签：src,const,element,react,内容,path,import From： https://www.cnblogs.com/shuangzikun/p/17471923.html