您的位置:首页 > Web前端 > React

小白使用React---走过的一些坑

2017-11-26 11:52 197 查看

1、定义组件时,

          一定要首字母大写,不写时识别不出来。

2、多个组件组合渲染时,

           一定要用一个标签包裹起来,不包裹时只会渲染最后一个组件的。

3、React中使用Bootstrap,

           除了安装react-bootstrap,还要在index.html中引入bootstrap.css。官网第一句话就说了。要不使用bootstrap布局不起作用

最重要的是,一定要看官方文档啊~~~  英文的也要看,不管……




4、React使用jqyery的ajax功能

data属性不是默认序列化的。后台如果用了SpringMVC他自己已经反序列化了,所以前端要把json对象序列化一下。Json.stringfy(dataJson)

5、自动化构建React项目

    小白不会用webpack。由于项目导师催的比较紧,后来发现react自己封装好的构建命令  npm run build。封装的很不错哦,就是用的时候,需要修改下,node_modules中react-scripts中的paths.js的默认路径,改成适合自己项目的路径。

   http://blog.csdn.net/qq_22713749/article/details/77477215

6、使用form表单时走过的坑

https://www.cnblogs.com/ghost-xyx/p/5253567.html




7、react中的this问题

ajax返回的数据,设置state中的值,报错this.setState not a function。是因为$.ajax中this指向的是jquery。用bind绑定React的this

handleFileUpload(){
let formData = new FormData($( "#uploadForm" )[0]);
$.ajax({
url: '/srmp/v1/file/upload' ,
type: 'POST',
data: formData,
processData: false,  // 告诉jQuery不要去处理发送的数据
contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
success: function (returndata) {//上传文件成功后,把fileID作为fileAddress
if(returndata.meta.success===true) {

let fileid=returndata.data.fileID;
let filenames=returndata.data.fileName;
let filename=filenames.split(',');
console.log(filename);
// alert("操作成功");
this.setState({
fileName:filename,
fileAddress: fileid
});
}
}.bind(this),
error: function (returndata) {
alert("上传失败,请重新上传");
}
});
}


参考资料:https://segmentfault.com/q/1010000008041431/a-1020000008041671

8、React条件渲染

http://blog.csdn.net/m0_37355951/article/details/72855583




9.React的生命周期

http://blog.csdn.net/ElinaVampire/article/details/51813677

10.很好的一篇react文章,帮助大家少走一些坑

http://www.jianshu.com/p/ad3a184db28e
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: