react躺坑记

练手项目很急，基础不够稳，又总是遇到各类问题；面向谷歌和StackOverFlow编程；

常见错误

Uncaught TypeError: Cannot read property 'setState' of undefined

没有绑定

this.handleSubmit=this.handleSubmit.bind(this)
复制代码

blog.csdn.net/huanghanqia…

路由组件切换回到顶部

import { Component } from 'react';
import { withRouter } from 'react-router-dom';
class ScrollToTop extends Component {
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
		window.scrollTo(0, 0)
		}
}
render() {
	return this.props.children
	}
}
export default withRouter(ScrollToTop);
复制代码

监听鼠标

上下：onWheel

handleWheel (event) {
let deta = event.deltaY;
if(deta > 0){
	console.log("向下")
	//window.scrollTo(0,3200)
}
if (deta<0){
	console.log("向上")
	//window.scrollTo(500,0)
}
}
复制代码

addEventListener

//离开组件前移除
componentWillUnmount(){
	window.removeEventListener('scroll', this.handleScroll);
}

//挂载
componentDidMount(){
	window.addEventListener('scroll', this.handleScroll);
}
复制代码

上线打包空白：

这个react和vue都有， "homepage":"."

blog.csdn.net/Sophie_U/ar…

Warning: Hash history cannot PUSH the same path; a new entry will not be add

Link 增长replace

<Link to='/Citation' replace>Citation</Link>
复制代码

使用axios post 提交数据，后台获取不到提交的数据解决方案缘由：前端提交的数据格式与后台解析的格式不同

如：application/x-www-form-urlencoded application/json

blog.csdn.net/wopelo/arti…

看服务器介绍数据格式，若是是application/x-www-form-urlencoded，可使用qs，制做对应的格式； application/json就是对象形式了；

www.cnblogs.com/loveyaxin/p…

Import in body of module; reorder to top import/first

import 必须在其它全部业务代码前面（eslint 暴出）

Warning: Encountered two children with the same key

table的值key 同样了

dispatch is not a function

使用react-redux,把null加上

export default connect(null,mapDispathToProps)(WrappedWebserver)
复制代码

echarts空白不报错

必须在div 中把长宽写上!!!百分比也行

<div id="gopie" style={{ width: 400, height: 400 }}>Sample proteins matchs no GO annotations</div>
复制代码

使用document.getElementById.innerHTML 替换以后再从新渲染不出图。

ant design anchor锚点和hisory router 冲突

若是路由更改成使用browserrouter 后须要后端跟着改配置； 使用react-router-hash-lin

经常使用插件

react-loadable 异步组件

github.com/jamiebuilds…

Warning: Invalid DOM property class. Did you mean className?

react 自带了className class属性改成className

iE支持

npm install --save-dev babel-polyfill

在src目录下的index.js 第一行加入：

import "babel-polyfill";
复制代码

全屏幻灯片插件

github.com/alvarotrigo…

点击图片放大插件

github.com/Caldis/reac…

警告

Using target="_blank" without rel="noopener noreferrer" is a security risk:

在超连接上增长 ，不然有危险

rel="nofollow me noopener noreferrer"
复制代码

No duplicate props allowed react/jsx-no-duplicate-props

同一个class设置两个同样的名字

Unexpected string concatenation of literals no-useless-concat

字符串拼接没有按照Eslint规则

(YES)

const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
复制代码

vs (NO)

onst value = '; ' + document.cookie;
const parts = value.split('; ' + name + '=');
复制代码

fetch使用:

听说比axio还好，可是我不成熟，包装很差

www.jianshu.com/p/d0d21baf4…

segmentfault.com/a/119000001…

坑：

ymbo.github.io/2018/01/09/…

npm install whatwg-fetch --save

为了兼容老版本浏览器，还须要安装

npm install es6-promise --save。

import 'whatwg-fetch';
import 'es6-promise';
复制代码

访问： www.lysinetcga.renlab.org/webserver/g…

** 更改设置事后须要重启项目！！！ **

app.use(proxy('/api',
{
	target: 'http://www.lysinetcga.renlab.org/',
	changeOrigin: true,
	pathRewrite:{
	'^/api':'',
},
}
)
复制代码

'/api/webserver/get_username/'
复制代码

获取数据：

index.html 所在文件夹的api文件夹下的diaoyongR.php

/api/diaoyongR.php

app.use(proxy('/api',
{
	target: 'http://localhost:8088/',
	changeOrigin: true,
	pathRewrite:{
	'^/api':'api',
},
}
));
复制代码

var result = fetch('/api/diaoyongR.php', {
method: 'POST',
body: "cancer=1&gene=2",
credentials: 'include',
headers: { 'Accept': 'application/json, text/plain, */*', 'Content-Type': 'application/x-www-form-urlencoded' }
});
复制代码

var result2 = fetch('/api/headerList.json', {
credentials: 'include',
headers: { 'Accept': 'application/json, text/plain, */*' }
});
复制代码

result.then(res => {
	return res.text() // 将请求来的数据转化成 文本形式
	//return res.json() // 将数据转换成json格式
}).then(text => {
	console.log(text)
}).catch(function (e) {
	console.log("fetch fail");
});
复制代码

axios

主页下方的headerList.json文件； pathRewrite更改须要重启

若是是在主页目的 api2 文件夹下方的headerList.json, 改成：/api/api2/headerList.json

app.use(proxy('/api',
{
	target: 'http://localhost:8088/',
	changeOrigin: true,
	pathRewrite:{
	'^/api':'',
},
}
));
复制代码

axios.get('/api/headerList.json',{
	// cancer:'cancer1',
	// gene:"gene1"
}).then((res)=>{
	console.log(res.data)
})
.catch(function (error) {
console.log(error)
})

复制代码