丰田项目踩坑手记（REACT）

路由配置的时候：要引入hash路由不是browswer那个

• 路由参考网址：react-guide.github.io/react-route…
• 路由网址：reacttraining.com/react-route…

步骤：

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

三级联选的时候，首先把第一级过滤出来，然后选完第一级实时更新，第二级Select的value默认置为第一个，然后在每次onChange的时候把value的值重置为当前选择的，第三级的也是根据上一级的选择的过滤出来

对于变量：页面展示用到了就设置状态，没用到直接就this.xxx,setState太多会影响性能，因为setState的时候会默认作出很多处理

丰田项目线上地址：event.taoche.com/toyota/inde…

react路由的官方文档：react-guide.github.io/react-route…

地图api:(lbsyun.baidu.com/jsdemo.htm#…