react踩坑笔记

1、create-react-app中配置webpack

// 方法一：将项目的配置文件抽取到项目中，即运行：
npm run eject

// 方法二：使用react-app-rewired

2、create-react-app中src文件夹的别名，当使用了ts时可以在tsconfig.json中配置

"compilerOptions": {
    "baseUrl":"src",
    "paths":{
      "src/*":["./*"],
      "components/*":["./components/*"],
      "pages/*":["./pages/*"],
      "api/*":["./api/*"],
      "routes/*":["./routes/*"],
      "reducers/*":["./reducers/*"],
      "store/*":["./store/*"]
    },
  },

 3、将字符串dom生成为react元素

React.createElement(
                'span',
                {
                  dangerouslySetInnerHTML: {__html: '这是一个<b>加粗</b>文本'}
                },
              )

 4、eslint用 npx eslint --init来生成配置，使用pre-commit来实现每次提交前检查，如果如果检测失败则禁止提交

5、要用stylelint 需安装依赖 stylelint  stylelint-config-standard  stylelint-scss  stylelint-config-recess-order

6、请求代理http-proxy-middleware不是直接导出的方法，而是一个对象

7、可以通过路由的reader函数来传递route组件的props

8、用=号给class实例属性赋值，报错Parsing error: Unexpected token =，需要在eslint中添加配置

// 指定eslint解析器
parser: "babel-eslint",

 9、使用es时 覆盖webpack配置

// 设置别名
  addWebpackAlias({ 
    '@': path.resolve(__dirname, 'src'),
    '@axios': path.resolve(__dirname, 'src/api/axios.js'),
  }),

  // 加载scss全局变量
  adjustStyleLoaders(rule => {
    if (rule.test.toString().includes('scss')) {
      rule.use.push({
        loader: require.resolve('sass-resources-loader'),
        options: {
          resources: './src/assets/sass/mixin.scss', // 公共scss变量的路径
        }
      })
    }
  })

10、fetch默认不带cookie，如果要带cookie需要显式设置属性{credentials: "include"}

11、在Chrome 85中，有个很重要的变化：将Referrer-Policy默认值从no-referrer-when-downgrade改为strict-origin-when-cross-origin，导致浏览器智能发送同源请求而不能发送异源请求，如果要改变默认行为可以用meta标签 <meta name="referrer" content="no-referrer|no-referrer-when-downgrade|origin|origin-when-crossorigin|unsafe-url">

12、在postman中可以正常请求，在开发环境中请求却报500

app.use(
    '/path',
    proxy.createProxyMiddleware({
      target: 'http://xx.xx.com', // 代理地址
      changeOrigin: true, // 服务端限制的话，需要将请求的源地址改为目标地址，不然报500
    })
  )