entd使用
使用entd的layout布局快速搭建页面
entd官网 页面刷新,路由不刷新,设置sider和路由同步,在componentWillMount还是componentDidMount都获取不到路由信息,但是能获取window.location,
利用window.location获取路由信息,同步sider选中框
请求豆瓣数据
API使用参考
react可以用原生的fetch请求,如果跨域可以用fetch-jsonp获取所需数据
cnpm i fetch-jsonp -S
使用:
import fetchJSONP from 'fetch-jsonp'
let url = `https://douban.uieee.com/v2/movie/${this.state.type}?start=${(this.state.nowPage - 1) * this.state.pageSize}&count=${this.state.pageSize}`
fetchJSONP(url)
.then((res) => res.json())
.then((res) => {
something...
})
.catch((err) => console.log(err))
数据加载动画,使用antd的Spin
//按需引入
import { Spin, Pagination } from 'antd'
//使用
<Spin
style={{ display: 'block', margin: '0.6rem auto' }}
size="large"
tip="Loading..."
></Spin>
电影数据下面的分页使用antd的Pagination
同样使用方式
点击电影照片,跳转到对应详情组件,这里因为根据电影id获取数据的api不好用,获取数据方式变成了,在父组件定义一个方法和一个接收数据的变量,把这个方法传递到电影列表组件,点击一个电影卡片,就出发这个方法,这个方法把点击的电影的信息传给父组件上面接收信息的变量,然后把这个变量传递给电影详情组件,这样也可以实现,点击哪个电影,就获取哪个电影的信息,将这个信息传递给它的兄弟组件展示详情信息
组件传值
正常组件只需要在组件的标签上书写就可以实现
<Movie name="name"></Movie>
使用路由展示的组件的上面这样写不生效,可以换一种写法
<Route path="/movie/:type/:page" render={()=>(
<MovieList getDetailed={this.getDetailed}></MovieList>
)}></Route>
不过这样写有一个缺陷,就是在组件内部获取this.props时获取不到路由信息,路由的对应参数可以通过window.location.hash来获取
代码:GitHub下载