首页 > 代码库 > react项目中遇到的BUG

react项目中遇到的BUG

2024-09-14 18:43:29   216人阅读

前情提要：最近在学习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文件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box">

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

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

//app.js文件
import React from ‘react‘;
import { Link } from ‘react-router‘;
import Jquery from "./jquery.js";
import styles from "./style.css";

class App extends React.Component {
constructor(props) {
super(props);
}

render() {
return (
<div>
  <h1> 欢迎访问主界面 </h1>
<div className="showBox">
{
this.props.children
}
</div>
   <ul>
<li><Link to="/center" activeStyle={{background:"blue"}} >用户中心 </Link></li>  
<li><Link to="/quanzi" className="danger" > 圈子 </Link></li>
<li><Link to="/shipin" activeStyle={{background:"blue"}}> 视频 </Link></li>
<li><Link to="/toutiao" activeStyle={{background:"blue"}}> 头条 </Link></li>
<li><Link to="/dinggou" activeStyle={{background:"blue"}}> 订购 </Link></li>
</ul>
</div>
);
}
}
//代替A标签 不需要使用hash值  
// this.props.children 指代是每一个 route 嵌套结构下的子组件 
export default  App
//main.js文件
import React, { Component, PropTypes } from ‘react‘;
import ReactDOM,{render} from ‘react-dom‘;
import { Router,Route,hashHistory,Link,browserHistory,IndexRoute,IndexRedirect,Redirect } from ‘react-router‘;
import App from ‘./app.js‘;
import Center from ‘./center.js‘;
import Toutiao from ‘./toutiao.js‘;
import Quanzi from ‘./quanzi.js‘;
import Dinggou from ‘./dinggou.js‘;
import Shipin from ‘./shipin.js‘;
import styles from "./style.css" 


//1.主视图
var doc = document.getElementById("box");
render((
        <Router history={ browserHistory }>
            <Route path="/" component={App}>
                <IndexRoute path="/center" component={ Center } /> //设置默认路由
                <Route path="/toutiao" component={Toutiao} />
                <Route path="/quanzi" component={Quanzi} />
                <Route path="/shipin" component={Shipin} />
                <Route path="/dinggou" component={Dinggou} />
                <IndexRedirect to="/toutiao"> </IndexRedirect>
            </Route>
        </Router>
    ),doc)
//center.js文件  其他类似
import React from ‘react‘;

class Center extends React.Component {
constructor(props) {
super(props);
}

render() {
return (
<div>
  个人中心
</div>
);
}
}
export default  Center

webpack.config.js文件

var webpack = require("webpack");

var path = 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" //webpack  2.0 写法  1.0 不写-loader
},
{
test:/\.css$/,
loader:"style-loader!css-loader" //webpack  2.0 写法  1.0 不写-loader
},
{
test:/\.(jpg|png)$/,
loader:"url-loader?limit=8192" //webpack  2.0 写法  1.0 不写-loader 当 图片大小低于8192 会自动转换 base64格式的图片
}
]
},
plugins:[
new webpack.HotModuleReplacementPlugin(), //热替换 热更行 热加载
new webpack.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",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"file-loader": "^0.11.1",
"json-loader": "^0.5.4",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^2.8.1",
"resolve-url-loader": "^2.0.2",
"style-loader": "^0.16.1",
"url-loader": "^0.5.8",
"webpack": "^2.3.3",
"webpack-dev-server": "^2.4.2"
}
}

安装的插件

cnpm i -S webpack react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react react-router@2 css-loader style-loader file-loader

遇到的bug

本文出自 “小Q博客” 博客，谢绝转载！

react项目中遇到的BUG


联系
我们