react项目中遇到的BUG

发布时间：2020-12-15 05:08:53 所属栏目：百科来源：网络整理

前情提要：最近在学习react，然后就将项目中遇到的bug总结下来，作为借鉴！

项目结构：

demo

|app

|app.js

|main.js

|center.js

|toutiao.js

|quanzi.js

|shipin.js

|dinggou.js

|style.css

|build

|index.html

|.babelrc

|package.json

|node_modules

|webpack.config.js

html文件：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<divid="box">

</div>
<scriptsrc="http://localhost:8080/webpack-dev-server.js"></script>
<scriptsrc="app.js"></script>
<scriptsrc="main.js"></script>
</body>
</html>

app.js、main.js、center.js、toutiao.js、quanzi.js、shipin.js、dinggou.js文件如下：

//app.js文件
importReactfrom'react';
import{Link}from'react-router';
importJqueryfrom"./jquery.js";
importstylesfrom"./style.css";

classAppextendsReact.Component{
constructor(props){
super(props);
}

render(){
return(
<div>
<h1>欢迎访问主界面</h1>
<divclassName="showBox">
{
this.props.children
}
</div>
<ul>
<li><Linkto="/center"activeStyle={{background:"blue"}}>用户中心</Link></li>
<li><Linkto="/quanzi"className="danger">圈子</Link></li>
<li><Linkto="/shipin"activeStyle={{background:"blue"}}>视频</Link></li>
<li><Linkto="/toutiao"activeStyle={{background:"blue"}}>头条</Link></li>
<li><Linkto="/dinggou"activeStyle={{background:"blue"}}>订购</Link></li>
</ul>
</div>
);
}
}
//代替A标签不需要使用hash值
//this.props.children指代是每一个route嵌套结构下的子组件
exportdefaultApp

//main.js文件
importReact,{Component,PropTypes}from'react';
importReactDOM,{render}from'react-dom';
import{Router,Route,hashHistory,Link,browserHistory,IndexRoute,IndexRedirect,Redirect}from'react-router';
importAppfrom'./app.js';
importCenterfrom'./center.js';
importToutiaofrom'./toutiao.js';
importQuanzifrom'./quanzi.js';
importDinggoufrom'./dinggou.js';
importShipinfrom'./shipin.js';
importstylesfrom"./style.css"


//1.主视图
vardoc=document.getElementById("box");
render((
<Routerhistory={browserHistory}>
<Routepath="/"component={App}>
<IndexRoutepath="/center"component={Center}/>//设置默认路由
<Routepath="/toutiao"component={Toutiao}/>
<Routepath="/quanzi"component={Quanzi}/>
<Routepath="/shipin"component={Shipin}/>
<Routepath="/dinggou"component={Dinggou}/>
<IndexRedirectto="/toutiao"></IndexRedirect>
</Route>
</Router>
),doc)

//center.js文件其他类似
importReactfrom'react';

classCenterextendsReact.Component{
constructor(props){
super(props);
}

render(){
return(
<div>
个人中心
</div>
);
}
}
exportdefaultCenter

webpack.config.js文件

varwebpack=require("webpack");

varpath=require("path")
module.exports={
devtool:"eval-source-map",entry:{
main:["webpack/hot/dev-server",__dirname+"/app/main.js"],app:["webpack/hot/dev-server",__dirname+"/app/app.js"]
},output:{
path:__dirname+"/build",filename:"[name].js"//变量name固定的API
},module:{
loaders:[
{
test:/.js$/,exclude:/node_modules/,loader:"babel-loader"//webpack2.0写法1.0不写-loader
},{
test:/.css$/,loader:"style-loader!css-loader"//webpack2.0写法1.0不写-loader
},{
test:/.(jpg|png)$/,loader:"url-loader?limit=8192"//webpack2.0写法1.0不写-loader当图片大小低于8192会自动转换base64格式的图片
}
]
},plugins:[
newwebpack.HotModuleReplacementPlugin(),//热替换热更行热加载
newwebpack.optimize.UglifyJsPlugin(),//压缩JS代码
]
}

.babelrc文件：

{
"presets":["es2015","react"]
}

package.json文件：

{
"name":"react","version":"1.0.0","description":"","main":"index.js","scripts":{
"build":"webpack","start":"webpack-dev-server--progress--colors--content-base./build--history-api-fallback"
},"author":"","license":"ISC","devDependencies":{
"babel-core":"^6.24.1","babel-loader":"^6.4.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","css-loader":"^0.28.0","json-loader":"^0.5.4","react":"^15.5.3","react-dom":"^15.5.3","react-router":"^2.8.1","style-loader":"^0.16.1","webpack":"^2.3.3","webpack-dev-server":"^2.4.2"
},"dependencies":{
"babel-core":"^6.24.1","file-loader":"^0.11.1","react":"^15.5.4","react-dom":"^15.5.4","resolve-url-loader":"^2.0.2","url-loader":"^0.5.8","webpack-dev-server":"^2.4.2"
}
}

安装的插件

cnpmi-Swebpackreactreact-dombabel-corebabel-loaderbabel-preset-es2015babel-preset-reactreact-router@2css-loaderstyle-loaderfile-loader

遇到的bug

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!