1.创建React脚手架项目
2.在该项目终端输入指令 npm start , 在浏览器显示
3.在该项目终端输入指令 cnpm install axios -S 安装 axios
在想要调用的组件内引用 import axios from 'axios'
调用方法 axios.get("接口地址").then((res)=>{
console.log(res) // 拿到数据渲染页面
})
4.下载完成上一步指令后，在该项目终端继续输入指令 npm install antd -S(如果你的网络环境不佳，推荐使用cnpm)
antd--------------UI框架 蚂蚁设计
antd是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品
antd官网 https://ant.design/components/table-cn/
import 'antd/dist/antd.css' //将下载好的 antd 样式引入到 组件
import { Button,Icon,Table } from 'antd'; //引用组件 直接可以使用，按照官方步骤
例如：我想用react 基于antd渲染 此接口地址 (http://elm.cangdu.org/shopping/restaurants?latitude=39.78493&longitude=116.49476&offset=0&limit=2000&extras[]=activities&keyword=&restaurant_category_id=&restaurant_category_ids[]=&order_by=&delivery_mode[]=) 获取的数据，App.js代码如下所示：
import React from "react"
import axios from 'axios'
import "antd/dist/antd.css"
import {Table} from "antd"
class App extends React.Component{
//构造方法
constructor(){
super()
this.state={
arr:[],
dataSource: [ ],
columns : [
{
title: '名称',
dataIndex: 'name',
key: 'name',
render: text => <a href="javascript:;">{text}</a>,
},
{
title: '图片',
dataIndex: 'image_path',
key: 'image_path',
render: text => <img width="40px" src={"http://elm.cangdu.org/img/"+text} />,
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
},
{
title: '电话',
dataIndex: 'phone',
key: 'phone',
},
{
title: '详情描述',
dataIndex: 'description',
key: 'description',
},
]
}
}
//生命周期 他是组件将要加载 会触发
componentWillMount(){
//调用get接口 then表示请求成功 里面的方法表示回调
axios.get("http://elm.cangdu.org/shopping/restaurants?latitude=39.78493&longitude=116.49476&offset=0&limit=2000&extras[]=activities&keyword=&restaurant_category_id=&restaurant_category_ids[]=&order_by=&delivery_mode[]=").then((res)=>{
console.log(res)
//拿到我们想要渲染的数据(res)
this.state.arr = res.data
//更新state，让视图刷新
this.setState({
arr:this.state.arr
})
})
}
render(){
return(
<div className="App">
<Table dataSource={this.state.arr} columns={this.state.columns} pagination={{pageSize:5}}/>;
{/* <table>
<tbody>
{ //map 循环 item 表示的是当前对象 index表示的是数组索引
this.state.arr.map((item,index)=>{
return(
<tr>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.address}</td>
<td>{item.category}</td>
<td>{item.phone}</td>
</tr>
)
})
}
</tbody>
</table> */}
</div>
)
}
}
export default App
浏览器呈现效果如下：
