zm_miner的博客

现在有一个需求, 点击一条数据的下载操作, 开启30s倒计时, 点击另一个也是开启30s倒计时, 但是两者的倒计时互不冲突。在我们日常需求中, 实现一个倒计时是常见的需求, 或者一个页面有两个倒计时 我们都可以去实现, 但是如何实现在。interval.js中的内容。...

Failed to compile.[eslint] Failed to load parser ‘@typescript-eslint/parser’ declared in ‘package.json » eslint-config-react-app#overrides[0]’: Cannot find module ‘typescript’Require stack:解决方法:

安装依赖 npm install --save axios js-base64点击修改按钮弹框选择图片或者文件代码index.js <AliyunOSSUpload onGetFileUrl={onGetFileUrl} />AliyunOSSUpload.jsimport React from 'react';import { Form, Upload, message, Button } from 'antd';import { getOSSClientCredit,

import { Button, Input } from 'antd'let timerconst Btn = () => { const [time, setTime] = useState(5) const [btnDisabled, setBtnDisabled] = useState(false) const [phone, setPhone] = useState() const [btnContent, setBtnContent] = useState('获取验

需求如图点击表格某一行选中,修改选中行的背景颜色查看antd的官方文档 https://ant.design/components/table-cn/会发现文档中给出了两个属性 rowClassName 和 onRowrowClassName: 表格行的类名, 如下图: 我通过this.setRowClassName方法添加类名onRow: 用于给表格添加事件, 如onClic...

使用antd中的select时,当滚动页面出现以下情况<Select placeholder="请选择" optionFilterProp="children" filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} allowClear > </Select>

a页面跳转到b页面, 通过state传参a页面 this.props.history.push({ pathname: `/chunan-my-declare-detail`, state: { record, takenCount: record.takenCount, takenTicketTime: record.t...

路由懒加载是什么意思?在开发中 , 我们打开开发者工具, 会发现我们刚刚打开就会去加载所有页面.路由懒加载就是只加载你当前点击的那个模块按需去加载路由对应的资源, 可以提高加载速度 (一个页面加载过后再次访问不会重复加载)实现原理：将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，只有当函数被调用的时候，才去加载对应的组件内容方法一: 重写首先, 新建一个asynccComponent.js , 作为公共jsimport {Component as ReactComponet} fr

render props 是什么 ? react官网给出了一个解释: render prop 是一个组件用来了解要渲染什么内容的函数 prop。import React, { Component } from 'react'export default class Parent extends Component { render () { return (<> <h3>我是parent组件</h3> <Children

组件之间通常会遇到兄弟组件之间传递参数 ,最简单的方式可能是统一交给父组件处理, 然后再把数据交给下面的子组件, 我们可以通过contex来进行兄弟组件之间数据传输首先我们先创建context容器对象testContext.jsimport * as React from 'react';export const TestContext = React.createContext()渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：ch

整理了一下路由组件传递参数的三种方式1.params传参路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>接收参数：this.props.match.params2.search传参路由链接(携带参数)：<Link to='/demo/test?name=tom&

以前写过一篇父组件调用子组件方法的文章, 当时是在class类组件中, 使用onRef本篇文章中使用useRef 实现父组件调用子组件方法实现的功能是父组件的按钮点击清空表单 则清空子组件中的input中的内容上代码parent.jsimport React, { createRef, useRef, useEffect } from 'react';import { Button } from 'antd'import Child from './child'const Parent =

项目需求 前端上传一个pdf文件后, 需要预览此pdf文件, 通过一系列调后端接口, 拿到一个存放该pdf的链接, 根据此链接打开pdf文件 如何操作???查阅资料得知有个react-pdf首先需要安装react-pdf包 npm install react-pdf --save组件引用及使用代码import React, { Component } from 'react';import { Document, Page } from './pdf-modules/react-pdf/entry

React Router v4页面跳转在React Router v4中 可以使用withRouter组件使用标签1.使用withRouter组件withRouter组件将注入history对象作为该组件的属性import React from 'react'import { withRouter } from 'react-router-dom'import { Button } from 'antd'export const ButtonWithRouter = withRout

问题: ‘React’ must be in scope when using JSX react/react-in-jsx-scope引入: import React from 'react

Usage: 全局安装版本: 0.0.21Usage: 当前项目安装版本: 0.0.21Usage: 最新版本号: 0.0.21Success: dll构建成功Starting type checking service…events.js:174throw er; // Unhandled ‘error’ event^Error: listen EADDRNOTAVAIL: ad...

想在antd design项目中使用阿里图标图标使用方式和在普通项目中的使用方法一样,如果你只是自己在阿里图标库中自己找个图标使用 首先进入阿里图标首页, 搜索你想要的icon点击右上角 购物出, 下载代码如果你有自己的项目下载代码到本地以后 解压把当前这六个文件复制到项目中...

有时候后端返回的数据并不是树形结构 而是list 形式,需要自己对数据进行改造原数据 const arr = [ { id: 0-0, title: '0-0', parentId: 0}, { id: 1-0, title: '1-0', parentId: 0}, {id: 0-0-0, title: '0-0-0', parentId: 0-0}, {id: 0-0-1,...

刷新页面 或者定时刷新数据的时候 比如我想显示的数字是100000, 正常刷新的时候 , 数据会直接从0到1000000 , 我想从0 渐变递增到1000000, 该如何实现呢, 其实使用js也可以实现的, 在此项目中 我使用了d3import React from 'react';import PropTypes from 'prop-types';import injectSheet f...

在react 中不想刷新整个页面, 只想定时刷新数据而已直接上代码class Refresh extends React.Component { static propTypes = { classes: PropTypes.object, } constructor() { super(); this.state = { reload: fa...

WebUploader的官网http://fex.baidu.com/webuploader/doc/index.html关于上传文件, 我有写过片关于ant 使用upload上传文件https://blog.youkuaiyun.com/zm_miner/article/details/95083719但是现在修改成分片上传, 使用WebUploader实现大文件分片上传,并且有进度显示html中...

近期使用ant design Pro 项目中遇到跳转路由的问题,一开始是遇到创建 跳转到创建页面的问题首先 我的跳转的路径是在modal中写的上代码不带参数的路由跳转首先使用import { routerRedux } from 'dva/router';modal中然后在js中点击创建按钮进行跳转带参数的路由跳转同样 跳转路径还是写在modal中首先在路由配置的地方也...

最近写项目时, 遇到了一个问题, 我明明向数组中push了数据, 但是打印的时候为[]数组, 并且其长度为0看代码先来看这种情况很正常对吧, 往数组中push一组数据, 长度为1往下看 static propTypes = { } constructor() { super(); this.state = { arr: [], ...

首先当你从git上面clone一个项目的时候怎么让项目跑起来, 首先看项目目录结构,找到README.md上面有项目运行的步骤, 如果没有可以看package.json文件,找到scripts上面有dev 所以跑起来项目就使用npm run dev有start 就使用 npm start但是要先安装项目依赖使用npm install依赖下载完成就可以使用npm run dev /npm...

项目中一个功能 可能在很多地方都有出现 那么此时我们肯定是要抽成一个组件, 如果此功能中需要传值呢我觉得子组件向父组件传值, 父组件调用子组件里面的事件, 父组件向子组件传值云云…. 前两者真的是需要仔细点琢磨 项目有个需求:需要对编号:中的值进行纯数字验证并且进行搜索, 此功能有十几个页面, 为了防止不写很多验证代码 打算把编号这个input框 和对它的验证放在一个文件中 .高级搜...

11

React 初接触一. react的安装1). 使用方法 可以直接下载使用 http://facebook.github.io/react/ 下载最新 2). 直接使用BootCDN的React CDN库.&amp;amp;lt;script src=&amp;quot;https://cdn.bootcss.com/react/15.4.2/react.min.js&amp;quot;&amp;amp;gt;&amp;amp;lt;/

在占位

占位

先简单记录页面传值, 还没完全弄懂其中的原理先配置路径跳转const SubRoutes = { prefix: 'parentPath', subRoutes: [ { name: '子路由', path: 'children', params: ':data', // 这个地方的修改可以是 params: ':id' }, ]...

一个关于搜索的组件， 来更加详细的了解父子组件之间传值的概念代码量缩短不推荐:推荐:子组件中放入搜索的组件searchBox.js中class SearchBox extends React.Component { constructor() { super(); this.state = { nameValue: '', idValue...

yarn add babel-polyfill 或者 npm install babel-polyfill --saveapp.js中import Promise from 'promise-polyfill';// To add to window 解决promise 在ie中未定义的问题if (!window.Promise) { window.Promise = Promis...

在antd-pro中实现下载功能, 前端页面可以这样写<Button onClick={this.onDownLoadClick}> 下载</Button> onDownLoadClick = () => { const fileName = "下载文件.txt"; const { dispatch } = this.props; di...

目前公司中有写到导入文件的功能模块, 目前使用的技术栈是react 但是在前加公司使用的请求是用 axios 然后自己封装一个post get请求这种, 本次是直接使用ant-prop的盒子, 所以使用的是dva , 请求方式是通过dispatch来发起的, 那么改怎么发起请求和传递参数上传功能:点击上传文件<Upload {...props}> <Butt...

处理react页面刷新问题, 只是数据定时刷新, 而不是当前页面刷新,类似F5刷新页面在react中, state和props数据更新, 就会重新render单个请求如果当前页面只有一个请求 那么可以把当前请求放在定时器setInterval中就可以实现当前页数据的定时刷新多个请求如果子组件中是echart的请求, 父组件引用众多子组件, 那么此时的定时器应该放在哪里?放在子...

react项目 ie9下 'Set"未定义引起的页面空白问题我在尝试上种方法不行以后, 我又试了各种方法, 然后就在ie9下显示了 , but , 后来我来帮我们项目组的人跑起来项目的时候使用前一篇的方法就可以实现, 在我打算写这篇文章的时候, 我重新复制项目, 想使用这种方式, 一步一步走, 截图报错的, but 又是前面一篇项目在ie9跑起来了…我也很无语…我凭印象了首先对象不支持 xx...

创建页面和修改页面为同一个js, 方法不同,修改为put方法, 创建为post方法, 但是当创建成功时, 页面可以跳转成功, 但当修改时无法跳转, url为同一个url 为甚???使用 withRouterwithRouter组件默认情况下必须经过路由匹配渲染的组件才存在this.props,才拥有路由参数，执行this.props.history.push(’/detail’)跳转到...

项目使用react使用 yarn dev 跑起来项目在ie9下面页面空白 , f12查看报错&quot;Set&quot;未定义解决方法1.安装 “babel-polyfill”yarn add babel-polyfill2.在入口文件app.js文件中引入import 'babel-polyfill'据网上所言一定要放在入口文件的最上面引入在webpack.config.js中修...

接着上一篇搜索组件 - 父组件向子组件传值(子组件调用父组件方法)上一篇最后问到, 如果我想通过父组件中的事件来触发子组件中的方法应该怎么做呢首先, 第一步子组件中写一个方法比如说例子中的获取子组件input中的值子组件js getInputData = () =&gt; { this.nameValue = this.state.nameValue; this.i...

接着上一篇文章继续 , 传送门, 上一篇地址搜索组件 - react中子组件向父组件中传值接着, 在上一篇中, 在父组件中拿到了子组件input框中的内容值, 然后在父组件中使用, 接下来点击搜索以后,我肯定是需要再次调用接口来重新渲染搜索的页面的所以 在父组件调用子组件的位置上添加一个属性, 向子组件传递&amp;lt;SearchBox getInitData={this.propsCh...