react踩坑-各種異常解決方案

1.react項目導入PropTypes報錯： Typo in static class property declaration react/no-typos

如果使用PropTypes一直報錯，先看看是不是大小寫的問題，應該是propTypes

 

 

參考文章：  https://blog.csdn.net/Beuty_Chen/article/details/107019128

學習參考：https://blog.csdn.net/Super_LD/article/details/80717232

 

2.使用less的mixin時一直報錯：

 

.flex(@justify-content: center, @align-items: center) when (iskeyword(@justify-content)), (iskeyword(@align-items)){
  display: flex;
  justify-content: @justify-content;
  align-items: @align-items;
}

解決方案：

 (1)確保自己的項目安裝了babel-plugin-import  less  less-loader  style-loader  css-loader，如果沒有安裝請安裝：

npm install --save-dev babel-plugin-import less less-loader style-loader css-loader

(2)找到config/webpack.config.js 文件（項目默認eject了），然后交換紅框中的位置，讓less-loader在postcss-loader后面，然后重新npm run start即可

 

 

3.react項目引入圖片的方式

img標簽引入圖片不能直接在src屬性中寫圖片的相對路徑或者絕對路徑，否則圖片不會顯示；（es6不支持在<img />標簽內直接寫圖片的路徑，即<img src="../images/photo.png"/>）

<img className="image" src="../../../assets/images/accountManager/loginLogo.png" alt=""/>

 

 這樣寫圖片不會顯示。

正確引入的方式：

（1）import 方法：

import imgURL from '../../../assets/images/accountManager/loginLogo.png'; 


<img src={imgURL } />

（2）require方法 這種方法需要注意的是，require里只能寫字符串，不能寫變量。

<img src={require('../../../assets/images/accountManager/loginLogo.png')} />

看一下直接引入和正確引入方法的Element你就會發現，圖片被轉為base64格式了

 

 

上方截圖第一個img標簽是用的require方式，第二個用的直接引入的方法