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
    })
  )

 13、antd日期組件中月和星期顯示問英文，其他顯示為中文，解決方法如下

import 'moment/locale/zh-cn'