vite+react+antd开发项目遇到的问题及解决方法（一）

react里的样式冲突

因为react和vue不同，它没有vue的scoped能使样式私有化，所以这里用到了css模块化。
还有其他方法也能实现，比如react-jss插件，

1. react-jss

   	//下载插件
   	npm install react-jss
   	//分割线-----------------------------
   	// 导入
   	import {createUseStyles } from "react-jss"
   	const useStyle = createUseStyles ({
   	.box: {
   		width:'100px'
   		'&:hover':{
   			color:'red
   			}
   	}})
   	//使用
   	const {box} = useSyle()
   	<div className = {box} > 你好啊react </div>

2. css模块化

//创建app.module.scss文件
.app{
    background-color: red;
}
//分割线-----------------------------
// 导入使用
import style from "./app.module.scss"
<div className={style.app}>22222</div>

react配置路由出现问题（vite环境）

1. 问题报错：[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
   解决：
   安装 @babel/plugin-transform-react-jsx 的插件 ：npm i @babel/plugin-transform-react-jsx
   配置

	import { defineConfig } from 'vite'
	import react from '@vitejs/plugin-react'
	// https://vitejs.dev/config/
	export default defineConfig({
			plugins: [react({
			babel: {
			plugins: ['@babel/plugin-transform-react-jsx'],
			},
			})],

2.问题报错：
Uncaught ReferenceError: React is not defined
解决：
只需要在提示错误的文件中引入React即可

vite打包工具+react里面解决跨域（也支持vue3）

• Vite+react跨域

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ["@babel/plugin-transform-react-jsx"],//解决编译不成功jsx问题
      },
    }),
  ],

  //配置跨域
  server: {
    host: "127.0.0.1",//开启服务的地址
    port: "",//开启服务的端口号
    //代理
    proxy: {
      //极速平台代理
      "/jisuApi": {
        target: "https://api.jisuapi.com/",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/jisuApi/, ""), //替换掉这个名字
      },
      //聚合平台代理
      "/juheApi": {
        target: "http://apis.juhe.cn/",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/juheApi/, ""), //替换掉这个名字
      },
    },
  },
});

• webpack打包工具跨域

  安装插件：npm install http-proxy-middleware 或者 yarn add http-proxy-middleware
  在src下面创建一个名为setupProxy.js的文件，在里面抒写以下代码

const { createProxyMiddleware } = require("http-proxy-middleware");
	module.exports = function (app) {
	    app.use(
	        "/api",
	        createProxyMiddleware({
	            target: "http://localhost:3000", // 后台服务地址以及端口号
	            changeOrigin: true, // 是否开启代理
	            pathRewrite: {
	                "/api": "", // 代理名称
	            },
	        })
	    );
	};

选择HashRouter还是BrowerRouter(推荐)?

推荐BrowerRouter，它没有那么多问题，
我用HashRouter不能显示所有页面，只能匹配到“/”和“*”，但是用了BrowerRouter就都能实现

建议

-----Browser Router使用HTML5的history API来实现，它使用真实的URL路径来匹配路由和渲染页面。 而HashRouter则是使用URL中的“#”来实现路由的匹配和渲染，这种方式被认为是“旧时代”的路由方式。

------在使用BrowserRouter时，如果你的服务器配置正确，那么所有路径都可以正确匹配到页面，因为它使用真实的URL路径来进行匹配。相反，如果使用HashRouter，则只能匹配到“/”和“*”路径，因为这是Hash Router的默认行为。

------如果你想使用Hash Router来实现路由，建议检查一下你的服务器配置是否正确，因为Hash
Router需要服务器正确配置才能正确工作。同时，如果你的应用需要使用浏览器的历史记录和URL路径，那么建议使用BrowserRouter。

react如何渲染后端传来含有html元素的数据？

dangerouslySetInnerHTML：是React标签的一个属性，必须是一个对象，并且这个对象的键要是 __html，代码如下：

 let content = getData()
 let contentObj = {   __html : content   }
> <div dangerouslySetInnerHTML = { contentObj } > </div>

react里的useState是同步还是异步？

异步，当我们直接设置值的时候，因为事件机制，我们不能立即获得异步后的值。所以这个时候我们可以通过useRef来处理这个痛点。

const [ value ,setValue ] = useState(0)
const cur = useRef()
//使用
setValue(1)
cur.current = 1  
//把更新后的值提前给useRef，这样我们可以通过cur.current来操作后续的业务，
//不用担心，value的值实际上就是1，只不过我们的需求是实时的，
//显然异步useState不能满足我们，所以我们借用了useRef

致谢

[参考链接]：https://cloud.tencent.com/developer/article/2192874