1. 前言

在脚手架里面做个组件封装的练习,
这个也是下篇文章 触底加载思路的组件基础

---

2. 需求

2.1 效果预览

1.png

---

2.2 分析

简单的Item组件 就是li
List组件 就是 ul
然后是界面组件 index.js

---

3. Item

这个需要对照着接口文档,来解构这些字段
这里边 左右包含起来 ,是因为我 用了flex布局,比较方便

import React, { Component } from 'react'

export default class Item extends Component {
    constructor(props) {
        super()
        this.state = {
            baseImgUrl: "http://yzs.can.com/img/"
        }
    }
    render() {
        let { image_path, name, recent_order_num, float_minimum_order_amount, piecewise_agent_fee, distance, order_lead_time } = this.props.item
        return (
                <li>
                    <div className="search-left">
                        <img src={this.state.baseImgUrl + image_path} alt={name}/>
                    </div>
                    <div className="search-right">
                        <p className="title"><strong>品牌</strong> {name}</p>
                        <p>月售{recent_order_num} 单</p>
                        <p>
                            ¥{float_minimum_order_amount}起送/{
                                piecewise_agent_fee.tips
                            }
                            <span>{distance}/ </span>
                            <i>{order_lead_time}</i>
                        </p>
                    </div>
                </li>
        )
    }
}

---

4. List

这里边既然用了this.props.list,也就是 父组件传值的时候属性也就确定了

import React, { Component } from 'react'
import Item from './Item'
export default class List extends Component {
    render() {
        return (
            <div>
                <ul className="list">
                    {
                        this.props.list.map(item=>{
                            return(
                                <Item  item={item} key={item.id}/>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

---

5. index.js

使用了 移动端的 框架
axios没有做过多的封装,也没挂原型上

5.1 布局

import React, { Component } from 'react'
import List from './List';
import axios from 'axios';
import { NavBar } from "antd-mobile"
export default class TakeOutComponent extends Component {
    constructor() {
        super()
        this.state = {
            list: [],
            pageNum: 0,
            pageSize: 6
        }
    }
    render() {
        return (
            <div>
                <NavBar> 懂得都懂 </NavBar>
                <List list={this.state.list} />
          </div>
        )
    }
}

---

5.2 axios

   componentDidMount() {
        this.getData()       
    }
    //**********************************  自定义函数
    getData() {
        const shopsUrl = "/shopping/restaurants"
        let params = {
            latitude: 31.22967,
            longitude: 121.4762,
            offset:this.state.pageSize*this.state.pageNum
            limit: this.state.pageSize
        }
        axios.get(shopsUrl, { params }).then(res => {
            // console.log("商铺列表数据",res)
            this.setState({
                list: res.data,
                pageNum: this.state.pageNum + 1
            })
        }).catch(err => {
            console.log("商铺列表失败:", err)
        })
    }

---

6. 后记

其实写熟练了 还是觉得 react更加飘逸,随心所欲

---

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉