美文网首页
react-34-组件封装案例

react-34-组件封装案例

作者: 云高风轻 | 来源:发表于2021-07-27 16:38 被阅读0次

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更加飘逸,随心所欲


参考资料

初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉

相关文章

  • react-34-组件封装案例

    1. 前言 在脚手架里面做个组件封装的练习,这个也是下篇文章 触底加载思路[https://www.jianshu...

  • 封装组件

    封装tab组件封装曝光加载组件封装轮播组件 代码

  • 面向对象实战

    封装轮播组件 轮播 封装曝光加载组件 曝光加载 封装Tab 组件 Tab组件

  • 面向对象实战

    1、tab组件封装2、轮播组件封装3、曝光组件封装

  • 封装element-ui的dialog组件

    封装组件: 使用封装的组件:

  • 高级-任务3

    封装一个轮播组件 封装一个曝光加载组件 封装一个 Tab 组件 封装一个 Modal 组件

  • 面向对象实战

    题目1: 封装一个轮播组件轮播组件题目2: 封装一个曝光加载组件曝光加载组件题目3: 封装一个 Tab 组件Tab 组件

  • Web37.面向对象实战

    题目1:封装一个轮播组件 题目2:封装一个曝光加载组件 题目3:封装一个Tab组件 题目4:封装一个日历组件 题目...

  • element-ui 封装dialog组件

    封装组件: 使用组件:

  • Vue 父子组件通信

    案例一 父组件 子组件 案例二 父组件 子组件

网友评论

      本文标题:react-34-组件封装案例

      本文链接:https://www.haomeiwen.com/subject/bfyomltx.html