react踩坑

在做react项目时，总会遇到一些报错，下面说说我踩过的坑：

1、在搭建react脚手架，安装好路由，项目正常运行后，想安装axios来获取服务器API接口数据。

　　在我运行了npm install axios --save之后，运行npm start项目报错，都是一些can not find module...

　　在百度上百度了要删除node_modules文件，再重新运行npm i，结果还是不行。

　　最后找到解决办法是：先删除node_modules，再删除package-lock.json，注意不是package.json，别删错了，然后执行npm i，最后执行npm start，成功运行。

 

2.es6不支持在<img />标签内直接写图片的路径，即：
　　<img src="../images/photo.png"/>

　　我最开始在webstorm打img然后按enter键，出来了：<img src="" alt=""/>，然后我采用require方法引入图片：

　　<img src=“{require('../assets/images/1.jpg')}” alt=""/>

　　结果图片显示不出来，检查一下，需要把"src="后面的双引号去掉方可。

　　（1）多图片，并且图片不大，且知道图片的顺序情况下，可以按照下面写：

　　[
　　　　{
　　　　　　"name":'img1'
　　　　　　"img":"img1",
　　　　　　"url":""
　　　　},
　　　　{
　　　　　　"name":"img2",
　　　　　　"img":"img2",
　　　　　　"url":""
　　　　},
　　　　{
　　　　　　"name":"img3",
　　　　　　"img":"img3",
　　　　　　"url":""
　　　　}
　　]

 

　　import img1 from'./../images/img1.png';
　　import img2 from'./../images/img2.png';
　　import img3 from'./../images/img3.png';

　　const imgsArr = [img1,img2,img3];

　　render(){
　　　　return(
　　　　　　<div>
　　　　　　　　{
　　　　　　　　　　imgsArr.map(function(name){
　　　　　　　　　　　　return(
　　　　　　　　　　　　　　<img src={name} />
　　　　　　　　　　　　　　)
　　　　　　　　　　})
　　　　　　　　}
　　　　　　</div>
　　　　)
　　}