![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
qq_41315539
这个作者很懒,什么都没留下…
展开
-
react组件
富文本组件BraftEditor相关资源:安装和使用 · 语雀Braft Editor | 基于DraftJS的强扩展性React富文本编辑器高亮显示组件资料:react-syntax-highlighter - npmReact Syntax Highlighter Demo日志显示组件资料:react-lazylog - npmReact Lazylog Style Guide音频波形图组件wavesurfer.js自己实现的效果...原创 2021-12-13 10:01:04 · 598 阅读 · 0 评论 -
react 父组件调用子组件
1、类(class)型组件// 子组件export default class Child extends React.Component{ componentDidMount(){ this.props.onRef(this); // 暴露给父组件 供父组件获取数据 } getName = () =>{ return "我是子组件啊" }原创 2021-11-19 10:36:42 · 351 阅读 · 0 评论 -
antd 树结构数据可拖拽表格
场景管理后台的树级结构菜单列表,需要可以通过鼠标拖拽修改菜单的层级结构代码import React from 'react'import { Table,Card,Form } from 'antd';import { DndProvider, DragSource, DropTarget } from 'react-dnd';import {HTML5Backend} from 'react-dnd-html5-backend';let dragingIndex = -1;cl原创 2021-11-15 10:10:54 · 2379 阅读 · 2 评论 -
react npm相关命令
1、从制定的镜像中下载制定版本的组件npm install wangeditor@4.7.5 --registry=https://registry.npm.taobao.orgnpm install wangeditor@4.7.5 (下载制定版本)npm install wangeditor (直接下载)------------使用中遇到问题再继续补充...原创 2021-07-28 11:19:21 · 166 阅读 · 0 评论 -
react --- promise
1、Promise 是一个对象,从它可以获取异步操作的消息。例如:PromiseState:pending(进行中)fulfilled(已成功)rejected(已失败)这是异步操作的结果状态,不能认为改变2、ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。const promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ .原创 2021-07-10 15:31:51 · 808 阅读 · 0 评论 -
React 好用组件
1、Json数据结构展示与操作------react-json-view效果图:a、安装npm install -D react-json-viewb、引入import ReactJson from 'react-json-view';3、使用<ReactJsonname={false}iconStyle="square"displayDataTypes={false}collapsedsrc={JSON.parse(val)}/>...原创 2021-03-05 14:39:35 · 80 阅读 · 0 评论 -
微信浏览器阻止video全屏播放
<video x5-video-player-type="h5-page" controls="controls" src="source"></video>增加属性: x5-video-player-type="h5-page" 即可原创 2020-12-29 20:07:26 · 234 阅读 · 0 评论 -
ant mobile 项目,本地接口调试配置代理
1、在package.json 中配置服务端接口地址"proxy": "http://xx.x.xxx.xxx:8029", 2、接口调用地址// http://localhost:3001/ 前端启动的地址,默认是3000 axios.post("http://localhost:3001/user/xxxx").then(res=>{console.log(res)})...原创 2020-12-07 14:02:53 · 212 阅读 · 0 评论 -
React 跳转方式
1、带参数跳转${res} 是参数this.props.history.push(`/flowchart/flow/${res}`)这种方式跳转是刷新当前页面跳转2、Link组件跳转<Link to={`/chat/topic/detail/${record.topicId}`} target="_blank">详情</Link>to:需要跳转到的url,target:控制是否打开新的浏览器窗口标签3、window.open(url,'_blank..原创 2020-09-25 14:59:29 · 881 阅读 · 0 评论 -
react-player实现视频播放与自定义进度条
环境react.js ant design pro 4.0实现效果代码import React from 'react'import { PageHeaderWrapper } from '@ant-design/pro-layout';import { Col ,Row,Button,Form,Input,Card,Slider,Select,message} from 'antd';import {CaretRightOutlined,PauseOutlined } f..原创 2020-07-27 21:25:38 · 6951 阅读 · 0 评论 -
Ant Design Mobile of React 创建报错:* name can no longer contain capital letters
1、创建使用dva/ create-react-app 新创建的空项目是报错先在D:\IDEAWorkplace\taoyunyouxuan 目录下手动创建文件夹YouXuanWeiXin然后从cmd命令:D:\IDEAWorkplace\taoyunyouxuan>create-react-app YouXuanWeiXin报错 Could not create a ...原创 2020-01-19 11:08:54 · 845 阅读 · 0 评论 -
react.js 请求本地图片资源
一、使用import引入importtestImgfrom'./image/img1.jpg'<img src={testImg}/>二、使用require引入注意:require('./image/img1.jpg')这种方式只能够使用路径地址不能够使用变量。<img src={require('./image/img1.jpg')}/&...原创 2020-02-08 19:54:00 · 1297 阅读 · 0 评论 -
react 页面跳转(点击事件、history、Link)
1、页面点击本地页面打开新页面引入ant的Button组件<Button style={{backgroundColor:'#F0F2F5'}} onClick={()=>{window.location.href="https://baidu.com"}} className="r-button">引入import {Link} from 'react-...原创 2020-02-14 11:29:05 · 10809 阅读 · 0 评论 -
react中写动态标签,render方法中如何使用if else 判断
在render()中循环数据,根据数据不同展示标签不同import React from 'react';const quanList=[ { id:1, buy_price:1,//购买券的价格 quan_price:30,//可抵扣价格 quanName:'仅限(学习机)商品使用', ...原创 2020-02-14 11:38:17 · 5399 阅读 · 0 评论 -
react 时间戳转时间格式
一、安装组件npm install --save moment二、引入组件importmomentfrom'moment';三、转换{moment(val.addtime).format("YYYY-MM-DDHH:mm:ss")}原创 2020-04-08 15:30:57 · 1828 阅读 · 0 评论 -
react 父组件数据更新 触发 子组件重新渲染
主要是在子组件中加上监听时间(子组件中添加一个生命周期函数)componentWillReceiveProps(nextProps){}例子:父组件import React from 'react';export default class Parent extends React.Component{ constructor(props){ ...原创 2020-04-11 10:46:06 · 9861 阅读 · 0 评论 -
Ant Design Pro 4.0 使用
一、table-list下载后自带的源码分析:<ProTable headerTitle="查询表格" actionRef={actionRef} rowKey="key" toolBarRender={(action, { selectedRows }) => [ <Button ic...原创 2020-04-16 09:21:58 · 1416 阅读 · 0 评论 -
react crypto-js 实现前端加密与解密
一、安装 crypto-jsnpminstallcrypto-js二、react 前端加密import CryptoJS from "crypto-js"const key = CryptoJS.enc.Base64.parse( 'YCFIyMTG5NTYxYzlmZTA2OA==')var iv = CryptoJS.enc.Base64.parse('YCFyMTG5NTYxYzlmZTA2OA==')// 手机号加密result = CryptoJS.AES.en...原创 2020-06-01 11:02:46 · 5472 阅读 · 2 评论 -
react 中金额处理展示
展示金额使用react-format一、安装组件npm install --save react-format二、引用组件import{Money}from'react-format';三、使用组件<Moneylocale="zh-CN"currency="CNY">35.6</Money>currency 取值CNY 人...原创 2020-05-06 19:24:22 · 1670 阅读 · 1 评论