豐田專案踩坑手記（REACT）
路由配置的時候：要引入hash路由不是browswer那個
步驟：
- 1、新建路由元件檔案在檔案裡面引入react路由
function BasicExample() {
return (
<Router>
<Switch>
<Route path='/' exact={true} component={Home}/>
<Route path='/home' component={Home}/>
<Route path='/sell' component={Sell}/>
<Route path="/buy" exact={true} component={Buy}/>
<Route path="/message" exact={true} component={Message}/>
<Route path="/saler" exact={true} component={Saler}/>
<Route path="/brand" exact={true} component={Brands}/>
<Route path="/message2" exact={true} component={Message2}/>
<Route path="/cardetail" exact={true} component={Detail}/>
</Switch>
</Router>
)
}
export default BasicExample;
複製程式碼帶引數路由跳轉（在url上面拼引數）,兩種方式選一種
有兩種方法：
-
1、直接用Link（相當於a） 寫法：<Link to={
/xxx/${xxx}}> -
2、寫點選事件：
import { Link } from "react-router-dom";
jump(i){
this.props.history.push(`/ucar/${i}`);
}
複製程式碼exact是精確匹配的意思 path是路徑要和導航的navLink（是navLink）一致
- 2、頭部導航元件裡面寫要跳轉的路徑（“/”或者“/home”或者。。。。。）
頭部元件引入：
import {NavLink} from "react-router-dom"
<div>
<ul className="tabGroup">
<li>
<NavLink to="/home" activeClassName="hover" style={{color:"#000",fontSize:"18px"}}>首頁</NavLink>
</li>
<li>
<NavLink to="/sell" activeClassName="hover" style={{color:"#000",fontSize:"18px"}}>安心買車</NavLink>
</li>
<li>
<NavLink to="/buy" activeClassName="hover" style={{color:"#000",fontSize:"18px"}}>安心賣車</NavLink>
</li>
<li>
<NavLink to="/brand" activeClassName="hover" style={{color:"#000",fontSize:"18px"}}>安心品牌</NavLink>
</li>
<li>
<NavLink to="/message" activeClassName="hover" style={{color:"#000",fontSize:"18px"}}>安心資訊</NavLink>
</li>
<li>
<NavLink to="/saler" activeClassName="hover" style={{color:"#000",fontSize:"18px"}}>安心經銷商</NavLink>
</li>
</ul>
</div>
複製程式碼
import { HashRouter as Router, Route, Link, Switch } from "react-router-dom";
複製程式碼難點2:換頁面回填
1、利用路由的方法:this.props.history.push({pathname: '/sell',query: { param:item,which}});
2、在需要拿到引數的頁面獲取引數(this.props.location.query.param)
難點3：setState 不能立刻拿到資料
- react可以參考：huziketang.mangojuice.top/books/react… 這個網站的講解
setState接受兩個引數：物件引數和回撥函式作為引數
handleClickOnLikeButton () {
this.setState((prevState) => {
return { count: 0 }
})
this.setState((prevState) => {
return { count: prevState.count + 1 } // 上一個 setState 的返回是 count 為 0，當前返回 1
})
this.setState((prevState) => {
return { count: prevState.count + 2 } // 上一個 setState 的返回是 count 為 1，當前返回 3
})
// 最後的結果是 this.state.count 為 3
}
複製程式碼-
上面我們進行了三次 setState，但是實際上元件只會重新渲染一次，而不是三次；這是因為在 React.js 內部會把 JavaScript 事件迴圈中的訊息佇列的同一個訊息中的 setState 都進行合併以後再重新渲染元件。
-
深層的原理並不需要過多糾結，你只需要記住的是：在使用 React.js 的時候，並不需要擔心多次進行 setState 會帶來效能問題。
地圖外掛的引用（注意寫樣式的時候不能寫 *，這樣會影響全域性）
- 地圖外掛的api(lbsyun.baidu.com/jsdemo.htm#…)
- 1、百度的先要自己註冊ak（我的ak：g1hboIUNSzb8fCwC0DsemlKqmrkKiLos）
- 2、引入的時候在全域性引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=g1hboIUNSzb8fCwC0DsemlKqmrkKiLos"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css"/>
複製程式碼- 3、在componnetDidmount裡面使用
this.maps = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915); // 建立點座標
this.maps.centerAndZoom(point, 15);
複製程式碼finIndex的用法
es6 :findIndex()函式也是查詢目標元素，找到就返回元素的位置，找不到就返回-1。
pc端選車空間和選城市空間的時候，要引入pc版本的
pc輪播圖的寫法
.banner {
position: relative;
}
.swiper-container{
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.banner .swiper-container .swiper-slide{
width: 100%;
height: 440px;
overflow: hidden;
}
.banner .swiper-slide img{
display:block;
width: 1920px;
height: 440px;
position: relative;
left: 50%;
margin-left: -960px;
}
複製程式碼react 選項卡的寫法（涉及到動態樣式繫結）
- 直接用樣式寫
handleShow =(index)=>{
this.setState({
currentIndex:index
})
};
<div className="container">
<Head/>
<div className="tab">
<div onClick={this.handleShow.bind(this,0)} className={this.state.currentIndex===0?'activ':""}>品牌發展</div>
<div onClick={this.handleShow.bind(this,1)} className={this.state.currentIndex===1?'activ':""}>品牌業務</div>
</div>
<img src={pp1} alt="" style={{display:(this.state.currentIndex===0)?"block":"none"}}/>
<img src={pp2} alt="" style={{display:(this.state.currentIndex===1)?"block":"none"}}/>
</div>
)
複製程式碼獲取資料拼接字串的時候去要把所有的變數列印出來看看，然後再拼
let url=`http://zt.taoche.com/zt/api/GetCarList/GetCarData?25748231628663465%27%27&PARAM_SuperiorId=13&PARAM_PageSize=8${this.PARAM_PageIndex?('&PARAM_PageIndex=' + this.PARAM_PageIndex):''}${this.PARAM_CurrentCityID?('&PARAM_CurrentCityID='+this.PARAM_CurrentCityID):''}${this.PARAM_OrderBy ? ('&PARAM_OrderBy=' + this.PARAM_OrderBy) : ""}${this.PARAM_IsDESC===1||this.PARAM_IsDESC===0 ? ('&PARAM_IsDESC=' + this.PARAM_IsDESC) : ""}${this.PARAM_PriceLower?('&PARAM_PriceLower='+this.PARAM_PriceLower):""}${this.PARAM_PriceHigh?('&PARAM_PriceHigh='+this.PARAM_PriceHigh):''}${this.PARAM_AgeLower?('&PARAM_AgeLower='+ this.PARAM_AgeLower):""}${this.PARAM_AgeHigh?('&PARAM_AgeHigh='+this.PARAM_AgeHigh):""}${this.PARAM_DrivingMileageLower?('&PARAM_DrivingMileageLower='+this.PARAM_DrivingMileageLower):""}${this.PARAM_DrivingMileageHigh?('&PARAM_DrivingMileageHigh='+this.PARAM_DrivingMileageHigh):''}${this.PARAM_CarSerial?('&PARAM_CarSerial='+this.PARAM_CarSerial):''}${this.PARAM_MainBrand?('&PARAM_MainBrand='+this.PARAM_MainBrand):''}&PARAM_PictureCount=1&PARAM_RequestSource=6&PARAM_UcarStatus=1&PARAM_ShowColumn=CarDetailUrl,CarImageURL,cartitle,BuyCarYearMonth,DriveMiliDesc,DisplayPrice,carreferprice,ucarserialnumber,buycardate,ucarid,producerid,datacount`;
複製程式碼iframe嵌入外部網頁
<iframe src="http://www.taoche.com/Inc/taocheblock/ToyotaNewsList.shtml" frameBorder="no" border="0" scrolling="no" align="center" height="2500" width="1200"></iframe>
複製程式碼如果是跨域請求，在請求的時候一定是要寫callback,與後臺的一致
$.ajax({
url: `//event.huidu.taoche.com/UCarBasicInfo/GetStatus?ucarid=${this.props.match.params.id}`,
type: "GET",
dataType: 'jsonp',
jsonp: 'callBack',
success: (res) => {
if (res.Result) {
this.setState({
carinfo: res.Data
})
}
},
error: (err) => {
console.log(err);
}
});
複製程式碼