![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React.js
文章平均质量分 66
Willard_zhang
这个作者很懒,什么都没留下…
展开
-
基于React的图片裁剪组件
一. 需求:最近项目中遇到要进行图片裁剪的需求,采用了cropperjs进行二次图片裁剪组件封装。在这里记录下二次封装过程。二. 二次封装代码:import React, { useState, MouseEvent, FunctionComponent } from 'react';import styles from './index.less';import Cropper from 'cropperjs';import { Button } from '@pyramid-kit/mo原创 2020-12-11 17:38:28 · 888 阅读 · 0 评论 -
React父组件调用(触发)表单子组件实例或方法
一. 需求:最近在做项目的时候遇到这样一个需求。表单页可重复使用,即把表单页单独写为公共组件,但是在调用该子组件的父组件需要触发表单子组件的保存数据和校验提交表单数据的方法,表单子组件采用的是React高阶form组件构成,而子组件暴露方法给调用父组件需要使用useImperativeHandle,这是需要React.forwardRef进行Ref的传递,以方便父组件获取实例触发方法。这个时候问题就出来了,当导出此组件时使用了高阶函数createForm封装,再怎么使用React.forwardRef封装呢原创 2020-12-10 09:58:16 · 1855 阅读 · 2 评论 -
基于React的垂直选项卡(含锚点定位功能)
需求:类似于美团的商家页面,左边是可点击选择的商品品类,右边是按各商品品类分类的商品列表。点击左边某品类时,右边商品列表自动滚动定位到该品类下商品第一个;滚动右边商品列表时,当滚动到某个品类名时自动定位高亮相对应的左边的品类名列表。所用到的插件:基于滚动插件better-scroll完成。用之前需要先了解一下better-scroll文档。所遇到的问题:在实际运用中,但商品品类和商品列表数据量特别大的时候,尤其是商品列表项目中有图片加载和事件绑定时,右侧的商品列表滚动会非常的卡顿。解决问题思路:原创 2020-12-09 20:59:27 · 1792 阅读 · 0 评论 -
基于React的图片预览组件
需求:最近项目中遇到要进行图片预览的需求,在网上找了一大圈可用的图片预览组件,起初选择react-wx-images-viewer作为预览组件二次开发,但后来发现虽然这个组件在Git上113个star,但这个组件用起来并不给力。切换图片时有种要飞的感觉,而且支持的功能也不是特别丰富,所以果断放弃了react-wx-images-viewer。然后在网络上继续寻找,最后发现一个开源预览组件非常好用,动画效果体验较好,支持的功能比较丰富,在这里记录下二次封装过程。采用的图片预览组件:react-photo-原创 2020-12-09 19:49:08 · 5272 阅读 · 0 评论