丰田项目踩坑手记（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);
}
});
