![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 85
Winson℡
The important thing in life is to have a great aim,and
determination to attain it.
展开
-
CSS样式揭秘
修改组件样式:1.去背景:background:none;2.去边框下划线:box-shadow: none;3.去鼠标事件:cursor: default;3.背景图片居中:background-position: center;4.背景图片随边框变化:background-size: contain;5.设置不重复背景图像(及如何重复):background-repeat: no-.........原创 2021-07-16 15:56:52 · 289 阅读 · 1 评论 -
React 函数组件
React 框架+ antd组件库 Modal.method()提示框import React from 'react'import { Modal } from 'antd'const PromptTips = ({ title, content,}) => { //提示弹窗 const showPromptModal = () => { ...原创 2020-03-13 14:27:12 · 223 阅读 · 0 评论 -
解决React -qrCode生成二维码不能微信识别问题
一般的网上解决方法特别多,但大多数都是大同小异,关于react-es6的框架搭语法很少见,下面是React中处理二维码触发微信识别的解决方法:import React, { useState, useRef, useEffect } from 'react';import { useWindowSize } from 'react-use';import QRCodeReact from '...原创 2020-03-12 10:46:18 · 2556 阅读 · 5 评论 -
web保存分享图片并保存的图片附带后端提供的地址生成的二维码Canvas画布实现及非画布实现保存二维码
首先需要html2canvas 这个库:添加链接描述因为前端框架是react,下载了html2canvas库后接下来上代码import html2canvas from 'html2canvas';import SharePoster from '@/pages/share/index';const [shareLink, setShareLink] = useState('');/...原创 2020-03-05 11:57:09 · 430 阅读 · 0 评论 -
React 解决安卓视频播放遮挡弹窗问题
问题描述由于视频组件层级过高并且无法使用z-index进行控制层级,导致许多人都无法在视频组件之上放置一些其他的组件。为此,一些漂亮的视频设计往往还没开始就宣告了结束解决方案解决思路其实也挺简单的。既然视频层级很高很高,并且我们不能降低视频层级或者提升其他组件层级已覆盖视频组件。那么我们就选择只在恰当的时候才让视频组件出现在我们的页面中。那么问题就显得简单起来了。思路大致如下:在渲染页...原创 2020-03-05 11:31:31 · 733 阅读 · 0 评论 -
mock list列表组件 以及弹出框邀请成功记录 antd-List滚动加载
// 列表中的项目const InviteRecord = ({ phoneNum, loginData }) => { // 单个内容的显示逻辑分离 const displayPhoneNum = (phoneNum) => { const phoneNumStr = String(phoneNum) return phoneNumStr.length ==...原创 2020-03-05 11:19:50 · 538 阅读 · 0 评论 -
React库 rematch -Axios
react-use 创建跟踪状态:添加链接描述import {useInterval, useBoolean} from 'react-use';const delay = 1000; // 倒计时间隔const [startCount, toggleStartCount] = useBoolean(false);//短信读秒 startCount toggleStartCount u...原创 2020-03-05 11:11:27 · 244 阅读 · 0 评论 -
正则表达式React antd input 搜索框判空
<Form.Item label=“名字”>{getFieldDecorator(‘name’, {rules: [{required: true,message: ‘请输入名字’,},// 方式一:正则匹配(提示错误,阻止表单提交){pattern: /[\s]*$/,message: ‘禁止输入空格’,}],// 方式二:粗暴点不允许输入空格(其实是将e....原创 2019-12-17 16:19:15 · 2528 阅读 · 0 评论 -
js将数组转化为一个对象obj,键值对形式{} React 将数组转化为一个对象obj,用于两个数组比较
var formArr = [0:{name: “Name”, value: “111”},1:{name: “Price”, value: “2”},2:{name: “ProducingArea”, value: “3”},3:{name: “ShelfLife”, value: “44”},4:{name: “Stock”, value: “5”}];var obj={ };...原创 2019-12-17 15:34:49 · 834 阅读 · 0 评论 -
React antd组件多选框事件
按钮点击触发sendCheck()函数,代码如下: const [userList, setUserList] = useState(userLists);//用来对多选框选项进行更新的数组 const [arrList, setArrList] = useState([]);//用来显示选中的项的数组ES6语法,用来更新数组 ,userLists是设置的默认值const sendChe...原创 2019-12-12 17:23:45 · 1166 阅读 · 0 评论 -
react-UI教程
1. 最流行的开源React UI组件库1). material-ui(国外)官网: http://www.material-ui.com/#/github: https://github.com/callemall/material-ui2). ant-design(国内蚂蚁金服)官网: https://ant.design/github: https://github.com/a...转载 2019-12-10 00:08:41 · 149 阅读 · 0 评论 -
React、react-router笔记
1. React入门## 1.1. React基本认识## 1.2. React基本使用## 1.3. JSX的理解和使用## 1.4. 模块与模块化, 组件与组件化的理解2. React组件化编程## 2.1. 组件的定义与使用## 2.2. 组件的3大属性: state, props, refs## 2.3. 组件中的事件处理## 2.4. 组件的组合使用## 2.5. ...原创 2019-12-10 09:31:25 · 143 阅读 · 0 评论 -
React案例——笔记
1. 使用React脚手架创建一个React应用1). react脚手架1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 * 包含了所有需要的配置 * 指定好了所有的依赖 * 可以直接安装/编译/运行一个简单效果2. react提供了一个专门用于创建react项目的脚手架库: create-react-app3. 项目的整体技术架构为: react + webp...转载 2019-12-10 00:04:03 · 107 阅读 · 0 评论