博哥的二进制世界

最新版本create-react-app 如何使用css-module首先找到我们的config目录中的webpack.config.js，箭头处的代码，意思是css,scss,less文件，需要以xxx.module.css、xxx.module.scss、xxx.module.less的形式，才能开启css-module以scss为例，新建Login.module.scss之后在Login.tsx中引入Login.module.scss，并使用css-module的写法css module生

react跳转锚点传统解决方案（使用a标签跳转锚点）使用scrollToAnchor跳转锚点（正确做法）传统解决方案（使用a标签跳转锚点）在react中，用这种传统的方式，如果是基于browserHistory，路径上加了hash值，但是并不会跳转到想要的锚点位置。<a href="#scroll"> <button className="button"> <i className="text">跳转</i> </b

背景

create-react-app配置环境变量安装cross-env配置package.json命令创建.env ，.env.development ，.env.production ，.env.uat ，.env.sit，项目中获取当前环境变量安装cross-envnpm i cross-env -D配置package.json命令"scripts": { "serve": "cross-env REACT_APP_ENV=development node scripts/start.j

react-router中的render、children、component前言renderchildrencomponent注意前言在新发布的react-router 5.0中，route组件有三个支持组建渲染的属性，那我们到底该如何使用他们呢，今天就让我们详细的了解一下~renderrender属性能使你便捷的渲染内联组件或是嵌套组件，你可以给这个属性传入一个函数，当路由的路径匹配时调用。同时，render属性也会接受所有由route传入的所有参数 //内联方式 <Route pat

react+typescript通过window.xxx挂载属性报错的解决方案背景解决方案背景如下图，在react+typescript项目中，通过window.xxx挂载属性报错了，提示类型“Window & typeof globalThis”上不存在属性xxx，这是因为在typescript项目中，我们没有对window进行类型声明的原因，所以才会报错解决方案通过对window进行类型声明，即可解决此问题。在项目src目录下创建types文件夹，文件家下创建common.d.ts

react+typescript装饰器写法报错的解决办法背景思路背景前段时间，通过react+typescript+umi构建项目，在使用装饰器写法使用dva进行状态管理的时候发现，装饰器写法在tslint中报错了，提示作为表达式调用，无法解析类修饰器的签名？？？附上代码import React, { Component } from 'react'import { connect, UserInfoModelState, Loading } from 'umi';@connect(({ us

react阻止事件冒泡简单来说e.stopPropagation() 可以阻止合成事件之间的冒泡 不可以阻止合成事件到原生事件的冒泡因为React委托的document 和原生document不是同一个事物e.stopPropagation()阻止的只是到react对应document而当事件触发时，会向 react和原生document两个方向传递如果要阻止这两种冒泡，得写上下面两句，就真正阻止了冒泡e.stopPropagation();e.nativeEvent.stopImmedi

react通过props.history跳转页面，页面不更新的解决方案react引入react-router-dom，通过props.history跳转页面，url发生了变化，但页面没有更新（常出现情况：主路径不变、查询字符串改变）。这种情况我们可以通过以下办法解决如果是class组件，可以通过shouldComponmentUpdate将页面重新渲染如果是class组件，可以通过componentWillReceiveProps将页面重新渲染如果是函数式组件，可以通过useMemo模拟shoul

react实现路由跳转拦截功能背景Prompt组件Prompt组件介绍背景最近接到一个需求，当用户将要离开指定页面的时候，需要拦截页面的跳转，并弹出提示框，提醒用户去做某一项操作（比如数据的保存和提交），只有当用户完成操作之后，或者关闭提示窗，才能离开此页面进行下一页面的跳转。这样的需求，通常做法是：监听路由的跳转操作，阻塞跳转，实现拦截，并在用户处理完需要的操作之后（如数据保存、提交、关闭弹窗），才放开跳转权限，允许用户跳转下一页面。Prompt组件如果前端项目是使用vue来编写，我们可以很快处

前言本章我们将通过react+typescript的方式给项目接入百度地图步骤一：注册百度开发者，获取密匙百度地图开放平台注册成为开发者，进入控制台，创建应用获取AK密钥步骤二：修改项目的index.html贴入如下代码<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的ak密钥"></script>步骤三：修改webpack.config.js添加如下代码//

react实现分片打包前言法一：Loadable实现（不推荐）法二： 使用react的lazy，Suspense方法实现分片打包对redux进行分割前言React开发过程中，大部分都是单页面应用，不做代码分片的话，所有的js文件都打成一个庞大的bundlejs文件，随着项目内容的不断增多，首屏空白时间就会变得越来越长。因此可以对代码进行分片，打包时生成多个js文件，每次页面只请求所需要的js文件，用户体验大大提升。法一：Loadable实现（不推荐）在React16.6之前懒加载流行使用Loada

vue+ts或者react+ts如何使用animate.css前言使用animate.css（以vue+ts为例，react可参照类似方法）前言animate.css是一个第三方的纯css库，其中内置了众多我们常用的动画特效，详细特效及文档可以浏览animate.style以及animate.css动画演示使用animate.css（以vue+ts为例，react可参照类似方法）安装npm i animate.css -Smain.ts中引入import { createApp }

使用react-color实现前端取色器背景安装使用背景我们可以通过react-color实现前端界面的取色器，效果如下图所示：安装npm i react-color -S使用import React, { Component, Fragment, createRef } from 'react';import { Popover } from 'antd';import { SketchPicker } from 'react-color';type StateType = {

遇到这个问下，先检查看看是不是看着vant的2.x版本进行开发。vant2.x版本代码如下：<van-popup v-model="show" closeable position="bottom" :style="{ height: '30%' }"/>vant3.x版本代码如下：<van-popup v-model:show="show" round position="bottom" :style="{ height: '30%' }"

Antd Model完全自定义问题描述解决办法问题描述想实现Antd Model弹出框的内容与样式完全自定义，关键在于设置title={null}、footer={null}、closable={false}、bodyStyle={{padding: '0px'}}解决办法 <Modal title={null} footer={null} modalRender={(modal: any) => (

antd如何隐藏Upload组件的删除和预览图标如下所示，当Upload组件文件上传成功后，默认会出现预览和删除的图标如果我们不想显示这两个图标，应该如何操作呢？官方文档上有如下介绍：通过设置Upload组件的showUploadList属性下的showPreviewIcon, showRemoveIcon, showDownloadIcon，即可控制预览图标、删除图标、下载图标的展示和隐藏比如，我要隐藏Upload的预览图标详细代码如下：<Upload action={actio

react按需引入antd-mobile安装antd-mobile法一法二法三安装antd-mobilenpm i antd-mobile -S法一法二法三详细看官网https://mobile.ant.design/docs/react/introduce-cnhttps://mobile.ant.design/docs/react/use-with-create-react-app-cn...

react+umi+dva背景创建一个umi应用umi应用的路由配置路由路由配置工程化约定式路由路由跳转安装插件集@umijs/preset-reactumi+antdumi+dva背景React前端三大框架之一。Dva由阿里架构师 sorrycc 带领 team 完成的一套前端框架，在作者的 github 里是这么描述它的：”dva 是 react 和 redux 的最佳实践”。Antd是阿里的一套开箱即用的中台前端/设计解决方案，UI框架。Umi一套可插拔的企业级 react 应用框