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)
})

複製代碼