React踩坑记录

1.跨域配置

npm i http-proxy-middleware -S

项目src中新建文件setupProxy.js，名字不能更改，必须是这个

//setupProxy.js内容
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
    proxy.createProxyMiddleware('/api', {
      target: process.env.REACT_APP_BASE_URL, //你需要访问的地址
      changeOrigin: true,
      // secure: false,
      pathRewrite: {'^/api': ''}
    })
  )
}

2.自定义覆盖webpack配置

npm i customize-cra -S

项目根目录新建文件config-overrides.js，名字不能更改，必须是这个

//injectBabelPlugin
const { override, addDecoratorsLegacy, addWebpackAlias, addWebpackResolve, fixBabelImports, adjustStyleLoaders, addLessLoader } = require("customize-cra");
const path = require('path')
process.env.GENERATE_SOURCEMAP = "false";

module.exports = {
    webpack: override (
        // 路径别名
        addWebpackAlias({
            '@': path.resolve(__dirname, 'src')
        }),
        // 导入文件的时候可以不用添加文件的后缀名
        addWebpackResolve({
            extensions: ['.tsx', '.ts', '.js', '.jsx', '.json', '.css', '.scss']
        }),
        // 装饰器
        addDecoratorsLegacy(),
        // antd按需加载
        fixBabelImports('import', {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: true
        }),
        // antd定制化主题
        addLessLoader({
            lessOptions:{
               javascriptEnabled: true,
               modifyVars: { '@primary-color': '#5FE0B7' }
            }
        }),
        adjustStyleLoaders(rule => {
            if (rule.test.toString().includes("scss")) {
              rule.use.push({
                loader: require.resolve("sass-resources-loader"),
                options: {
                  resources: "./src/styles/var.scss" //公共scss变量         
                }
              });
            }
          })
    )
}

3.react-router-cache-route缓存路由

配合react v17版本和react-dom v17版本使用报错，解决办法使用16.13.1版本的react和react-dom

4. react-scripts react-app-rewired 配置多环境运行命令

1.dotenv

安装工具dotenv-cli
在根目录下新建文件

// .env.development 开发的配置文件
REACT_APP_BASE_URL=https://xxxxx
REACT_APP_ENV=development

// .env.test 测试的配置文件
REACT_APP_BASE_URL=https://xxxxx
REACT_APP_ENV=test

// .env.production 生产的配置文件
REACT_APP_BASE_URL=https://xxxxx
REACT_APP_ENV=production

修改package.json中的scripts指定环境

"build:dev": "dotenv -e .env.development react-app-rewired build",
"build:pro": "dotenv -e .env.production react-app-rewired build",

使用
html中：%REACT_APP_ENV%
js/jsx中：可以在process.env中访问

2.cross-env

安装 cross-env

npm install cross-env -D
或
yarn add cross-env -D

package.json 的 scripts 里面添加代码

"start:dev": "cross-env REACT_APP_ENV=development react-app-rewired start",
"start:test": "cross-env REACT_APP_ENV=test react-app-rewired start",
"start:prod": "cross-env REACT_APP_ENV=production react-app-rewired start",

通过使用REACT_APP_ENV就可以获取到不同环境的变量，根据此变量就可以设置不同环境的地址。
参考：https://www.jianshu.com/p/779e4fb250af

5. 函数组件中ref使用方法

import {useRef } from 'react';
...
const editContentInput = useRef()
...
<div ref={editContentInput} />
...
console.log(editContentInput)

6.函数组件中使用useEffect，每次useState修改其他数据，g2图表实例会被清除（原因：父组件数据改变，子组件会重新渲染）

使用memo包裹子组件函数

import {memo} from 'react'
const AComponent = memo(()=> {
})

7.全局Header组件中使用withRouter可在每次路由跳转获取页面路由信息

可用来控制Header组件的显示和隐藏

import {withRouter } from 'react-router-dom'
function Header () {
    return (
      <div></div>
    )
}
export default withRouter(Header);

8.react div滚动条滚动到到最底部

import { useState,useRef } from 'react';
...
const scrollEle = useRef()
...
<div ref={scrollEle}></div>
...
//元素滚动条滚动到底部
function scrollToBottom (ele) {
        if (ele && ele.current) {
            const scrollHeight = ele.current.scrollHeight;//里面div的实际高度
            const height = ele.current.clientHeight;  //网页可见高度
            const maxScrollTop = scrollHeight - height; 
            ele.current.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;
        }
}
scrollToBottom(scrollEle)

9.阻止默认事件

<div onClick={(e)=>clickFunction(e)}></div>
...
function clickFunction (e) {
  e.stopPropagation()
}

10.react操作dom元素

1.使用选择器：

import ReactDom from 'react-dom'
...
<span id='tip'></span>
...
var span = document.getElementById('tip')
...
ReactDom.findDOMNode(span).style.color = 'red'

2.使用ref属性

<span ref='tip'></span>
...
this.refs.tip.style.color = "red"

3.hook函数组件中

import {useRef} from 'react'
const a = useRef()
<span ref={a}></span>
console.log(a)

11. react使用ant input组件，onChange事件获取输入框值

e.persist();

12.react组件专属样式（效果等同vue style标签的scoped）

普通方式(教程默认js和css文件同级目录)：

//index.css样式文件
.red {
    color: red;
}

//index.js组件中引入样式
import './index.css'

...
//添加类名
<div className='red'></div>

组件专属样式

//样式文件命名 index.module.css
.red {
    color: red;
}
.blue-text {
    color: blue;
}

//index.js组件中引入样式,xxx为自定义命名
import xxx from './index.module.css'

...
//添加类名
<div className={xxx.red}></div>
<div className={xxx['blue-text']}></div>

持续更新！！！