react
文章平均质量分 63
checkMa
雪千山,何处寻得,人间春色
展开
-
antd-pro v5版本的tab页签最简实践
antd-pro v5版本的tab页签最简实践前言网上找了很多资料,也看了好些个代码,总觉得他们写的太累赘了。其实官方自己也说了,antdpro做页签和他们的产品理念不符合才不做,但是不代表他们没给我们预留修改空间,但是找了好多代码都没找到一个合适的插件。经过对layout组件的一番研究,但其实官方团队还是给我们预留了空间的,所以我也就是依据官方的预留空间做了一个最简实践,只需要写一个组件,加几行layout配置代码即可实现页签功能。提醒该写法肯定是会存在性能问题的,但是一般的项目用用是没啥问题的。原创 2021-06-29 23:01:15 · 3962 阅读 · 23 评论 -
在ts-react使用Modal
在ts-react使用Modal创建一个 Modal父组件中使用创建一个 Modalimport React, { useState, forwardRef, useImperativeHandle } from 'react';import { Modal } from 'antd';type TableItem = { key: React.Key; name: string; diff: number; temp: number;};interface RefProps原创 2021-05-24 10:38:54 · 540 阅读 · 0 评论 -
antdPro之路由菜单配置
antdPro使用之路由前言配置案例最后前言antdPro v5 的router主要使用了umijs v2的路由routes 以及@umijs/plugin-layout,总的来说,非常好用。在快速搭建项目的过程中,我们不需要去关注菜单和面包屑等功能的细节。在工程目录的config中直接配置一下路由就完了。routes位置如下图示配置案例export default [ { path: '/user', layout: false, // 表示是否需要在loyout容器内显示,原创 2021-04-23 10:27:43 · 6852 阅读 · 3 评论 -
treeSelect hook 实践
前言antd 的 treeSelect 用起来没 element 的爽快,因为我们在实际使用的过程中,老感觉它少了什么东西。比如在使用 allowClear 的时候,找不到清空回调;比如在使用 showSearch 自定义搜索内容后没找到想要的结果,怎么重置 treeData; 问题很多,官方文档都没有给出对应的解决方案,很是令人头大。然而,经过一段时间摸索后,我发现其实这也许不是 antd 的问题,只是自己对react不够熟悉的问题,嗯,一切的问题都只是因为自己太菜了。案例今天突发奇想,把项目中自定原创 2020-12-31 16:53:18 · 312 阅读 · 0 评论 -
react在hook组件里边调用class子组件
前言优化代码的过程不是一蹴而就的,庞大的代码量不可能几天就能完成从class到hook的更替,那么在这个过程中,我们就很可能遇到在hooks组件里边调用class子组件这种情况;问题当我使用hook父组件调用中间件嵌套的class子组件时,点击过一次后再次点击,定义的ChildRef 发生了丢失,且报错了import React , { Component , useState} from "react"import { withRouter } from "react-router-dom"原创 2020-11-27 17:06:59 · 2407 阅读 · 2 评论 -
react中父组件调用子组件的方法
前言react中,我们经常会想到,通过父元素直接调用子元素的方法,实现高内聚的效果。而这个用法的写法却是,五花八门。如下所示:1、类组件中的使用React.createRef()优点:1、写法简单易懂缺点:1、假如子组件是HOC,就无法指向真实子组件import React , { Component } from "react"class Child extends Component { func(){ console.log("执行我") } render(){ r原创 2020-11-21 08:44:36 · 54511 阅读 · 11 评论 -
react路由跳转导致组件两次重复挂载
react路由跳转导致组件两次重复挂载问题在使用react的history.push()方法进行路由跳转时,组件重复加载两次。代码案例如下: this.props.history.push(`/xxx/xxxx?title=参数`)后面多次检查代码后发现,是在使用history.push()方法时,参数值为中文才会出现该问题,其他类型则不会出现该问题。原因仔细追究其原因,应该是在进行带参数跳转时,浏览器会自动对中文进行转码,然后又会导致router的history方法监听浏览器地址栏变化。也就原创 2020-06-29 19:56:34 · 4081 阅读 · 4 评论 -
在react里边实现单击双击
在react里边写一个单击双击容器组件class组件import React, { Component } from 'react';import PropTypes from 'prop-types';// 双击class DoubleClick extends Component { // 是否在进行点击 isClick = false; // 点击次数 clickNum = 0; // 判断点击类型 getClickCount = () => { c原创 2020-06-18 10:59:03 · 3061 阅读 · 0 评论 -
react打包部署到服务器上样式加载不出来
问题react打包部署到服务器上样式加载不出来。其实经过仔细核查代码,发现本地能加载出来所有样式,在index.js首页的样式也能加载出来,但是每个路由组件的自定义样式不能加载出来。问题前提在项目中进行了动态import,且路由组件本身引入了自定义的css文件在服务器端或者index.html页面设置了 内容安全策略Content-Security-Policy style-src ...原创 2020-03-19 15:07:26 · 2222 阅读 · 0 评论 -
react 引入antd.less 报错问题之:Module build failed
报错如图:出现的原因:在react的app.js 直接引入了antd.less,antd的less里边包含了一些函数,且less-loader的版本在4.0以上时,需要做以下修改配置文件。如果引入了antd.css报了类似的错误,建议更换antd.css为antd.less,然后按以下说明修改。config文件{ loader: require.resolve('less-loa...原创 2020-03-03 15:22:40 · 2497 阅读 · 0 评论 -
使用js写一个圆形柱状图,语法为react
效果图jsimport React from 'react';import { withRouter } from 'react-router-dom';import './test.less';class Test extends React.Component { /** * 计算柱状图的坐标 * @params num Number 柱状图个数 * @p...原创 2020-02-12 11:55:42 · 417 阅读 · 0 评论 -
React 使用 viewer 展示图片,切换图片组时没有刷新展示图片内容
问题详情:当页面上使用了同一个viewer组件时,打开页面,切换Id获取第二组图片时,点击放大图片出现了以下问题。相关代码如下:图片组件import React, { Component } from 'react';import Proptypes from 'prop-types';import Viewer from 'viewerjs';import 'viewerjs/dis...原创 2020-01-09 09:46:14 · 1751 阅读 · 1 评论 -
React 中 _this.setState is not a function 报错
_this.setState is not a function 报错示例代码class Test extends Component{ state = {data:[]}; getData(){ this.setState({ data: [1,2] }) } render(){ return <div> <button onClick={t...原创 2019-11-27 10:37:36 · 853 阅读 · 0 评论 -
Vue和React的ECharts-Map-省市县级写法
前言echarts地图的相关的资料也找了好久,市县级地图的资源资本是要积分下载的,有的10个,有的40、50个积分,10个积分能理解,但是50个就有点过分了。这里我的资料也是下载了别人的,所以大家也还是去找找只要几个积分资源吧。下面上写法Vue配置文件先在配置文件里引入echarts// The Vue build version to load with the `import` ...原创 2019-08-13 10:00:02 · 654 阅读 · 0 评论 -
react双向绑定多个输入框
目标:双向绑定多个输入框import React, { Component } from "react";class Test extends Component { constructor() { super(); this.state = { List: [ { text: "公司", value: ...原创 2019-04-01 10:30:15 · 1345 阅读 · 0 评论 -
在react里边使用js跳转路由
在react里边使用js跳转路由 react-route 4.0+寻找解决方案示例关键点寻找解决方案百度上有各种答案,然鹅很多答案都不适用。直到找到了这个传送门示例import React, { Component } from "react";import { withRouter } from "react-router-dom";class Nav extends Compon...原创 2019-04-09 10:50:01 · 740 阅读 · 0 评论 -
react父子通讯
react 父子组件通信react父子组件通信是通过props来完成的,下面是一个小小的demo案例下面的案例通过输入框完成双向绑定的组件通信,完成了父传子,子传父的操作父组件把父组件的temperature和handleTemp以props的方式传给子组件import Son from "./Son"class Father extends Component { constr...原创 2019-04-22 13:32:56 · 171 阅读 · 0 评论 -
在react中使用/n换行字符
问题写页面的的时候遇到了一个小问题,jsx无法解析/n换行符,下面是代码和效果class Msg extends Component { state = { html: "+ 86-755-29977605 /n + 86 - 755 - 29748810 /n + 86 - 755 - 29977005"; }; render() { return ( ...原创 2019-04-18 10:40:46 · 25618 阅读 · 0 评论 -
使用react 写一个 仿淘宝 图片放大镜效果
效果图人狠话不多,先上效果图,看看是不是各位想要的再往下看使用方法import React, { Component } from "react";import ImageMagnifier from "../components/ImageMagnifier";class Details extends Component { state = { // 缩略图 ...原创 2019-04-23 11:14:08 · 3750 阅读 · 0 评论 -
react路由变化时页面置顶
只需要某一个页面置顶 // 组件挂载 componentDidMount() { window.scrollTo(0, 0); }路由变化时页面置顶,可以写在路由组件界面或者顶层组件里,但是不能写在app.js里// 路由相关配置 配置好了才能获取到 this.props.history 或者 this.props.locationimport { withRouter } ...原创 2019-04-24 14:27:51 · 1426 阅读 · 0 评论 -
react 跳转后路由变了页面没刷新
问题这样的问题貌似原因还挺多的,我的问题是带参数的url不能刷新,router 5.0版本 ,使用withRouter关联组件进行页面跳转如下所示路由代码解决方案在路由组件上最上层元素上加一个key增加路由的识别度,因为普通的跳转是根据path来识别的,但是path带上参数时,路由无法精确识别。不过,在跳转页面的时候,每个地址都会在localtion对象里添加一个key。如下打印 ...原创 2019-04-29 11:29:35 · 22567 阅读 · 9 评论 -
react 路由跳转时添加加载中动画
代码部分实现思路,借用antd 的spin组件实现,当然动画也可以自定义,动画持续时间也可以通过子组件的请求时间以redux来控制import React, { Component } from "react";import { Route, Switch, withRouter } from "react-router";import { Spin } from "antd";impo...原创 2019-04-29 11:36:16 · 3733 阅读 · 0 评论 -
react路由跳转到有video的界面时出现卡顿现象
问题今天遇到了一个问题,当react组件有video元素,且是通过props传值过来时,进入页面的一瞬间会出现卡顿现象在页面的使用 <Video videoUrl={videoUrl} />组件写法import React, { Component } from "react";import { Player } from "video-react";class V...原创 2019-04-24 18:06:27 · 870 阅读 · 0 评论 -
在React里边使用antd 的 Select defaultValue失效
在React里边使用antd 的 Select defaultValue失效首先第一个问题,defaultValue为什么失效第二个问题,我们将defaultValue设置为state动态值时,state变化,defaultValue不变化首先第一个问题,defaultValue为什么失效因为react的生命周期执行顺序是,componentWillMount , render, compon...原创 2019-06-04 10:57:24 · 10895 阅读 · 3 评论 -
在react中对自己的组件使用setFieldsValue
setFieldsValue的用法setFieldsValue是antd form的一个api,其作用是对指定的已使用from包裹的表单进行value设置。那么所以它的功能也很简单,那就是给指定的input设置value。如下所示:import React from "react";import { Form, Input } from 'antd';class TestForm ex...原创 2019-07-29 15:25:03 · 22396 阅读 · 2 评论 -
在react组件里边使用fontawesome
在react里边使用fontawesome初衷开始安装引入到组件中初衷公司设计师的图标不太好用,我想找一个全能的图标库,各种UI框架自带的图标库实在贫瘠,于是我花了一个上午去百度。最后找到了两个比较全能的图标库,一个是iconfont,一个是fontawesome。经过一些尝试,最后我选择了fontawesome。因为iconfont还需要各种下载操作,感觉很麻烦,而fontawesome只...原创 2019-03-30 13:58:58 · 712 阅读 · 0 评论