React
React
贝茵斯都
bug
展开
-
Antd 3.x Modal.confirm 手动控制
1.场景在confirm中输入内容,检验不通过,则提醒用户,但不关闭confirm框2.问题antd 样例中,onOk,onCancel都是一触即关的模式3.解决后校验不通过,confirm框依旧存在,点击取消或是输入正确内容后点击确定,confirm框才会消失代码:/*** @name feedBack* @author beiysd* @description 反馈*/ feedBack = () => { let confirm = Moda原创 2021-03-04 22:25:05 · 1978 阅读 · 1 评论 -
react 嵌套路由的子路由页面,刷新报错;正常从父级跳入不报错
1.场景:2.原因:01:主文件index.html中的 js 引入路径写为绝对路径导致;02:引入的某一js文件地址出错,需要一个个检查;原创 2021-03-01 13:52:17 · 546 阅读 · 0 评论 -
vs-code编辑器下,将已有项目文件的换行符由CRLF替换为LF
1.环境:vscode编辑器1.37.12.场景:从远程仓库拉取的代码,因为设置原因,要求使用LF换行符;但拉取后代码因为git-bash默认或是vscode默认原因,导致使用的是CRLF换行符,导致运行项目报错3.解决方法:yarn lint使用yarn lint运行一次代码,会将项目文件统一转换为以LF换行符为结尾...原创 2021-02-27 18:32:54 · 6479 阅读 · 3 评论 -
Jquery滚动到固定位置
1.场景:外部按钮控制容器滚动条,滚动到指定id的块级元素2.逻辑:3.源码/** * @Name: * @Author: * @Desc: 关于滚动条的一些事件 * @Date: 2020-12-04 09:25:34 */import React, { Component } from "react";import { Title } from "@/component";import $ from "jquery";import styles from "./st原创 2021-02-04 14:45:11 · 717 阅读 · 0 评论 -
日-周-月-年,时间选择组件
1.场景日:默认本日,以日为单位选择;周:默认本周,以周为单位选择;月-年类似2.组件:使用antd组件DatePicker3.效果4.源码:/** * @name TimeList * @desc 日期列表 * @author * @date 2021/02/03 */import React, { Component } from "react";import { DatePicker } from "antd";import moment from "m原创 2021-02-04 14:27:52 · 1383 阅读 · 0 评论 -
react、next.js引入路径修改
1.场景项目中引入文件,通常是import a from '../common/b'//表示src/common/b有些公共组件更是嵌套多层,所以使用符号@/,表示src/的路径使用import a from '@/common/b'//表示src/common/b2.react中使用环境:"react":"^17.0.1","webpack":"4.44.2",2.1在根目录中创建jsconfig.json文件,添加以下代码{ "compiler...原创 2021-01-25 16:30:55 · 1592 阅读 · 0 评论 -
react项目和next项目修改默认端口号
转载:https://www.cnblogs.com/beileixinqing/p/10396472.htmlcreat-react-app生成的项目默认端口号是3000,如下可以更改:在package.json中修改 "start":"react-scripts start",为"start":"set PORT=9000 && react-scripts start",next.js按文档生成的项目默认也是3000 "scripts": { "tes转载 2021-01-25 13:53:28 · 497 阅读 · 0 评论 -
webpack + dll 动态链接库 解决打包慢问题
参考:Webpack DLL 配置教程webpack使用-详解DllPlugin可视化分析包大小 webpack-bundle-analyzer**主要目标:使用webpack + dll 动态链接库方式,避免每次打包都重新构建所有第三方库,节约时间;**问题:当插件新增或首次打包时,时间依旧会变长,第二次就快很多,所以当插件固定时,做一次预打包处理,到真正需要打包时,速度会快很多1.环境:"webpack":"^4.42.0","webpack-cli":"^4..原创 2021-01-20 15:46:30 · 582 阅读 · 1 评论 -
webpack 不同版本打包,屏蔽打印和debug
1.webpack 3.x,在webpack.config.prod.js中配置2.webpack 4.x,在webpack.config.js中查找optimization根目录,添加如下配置原创 2021-01-19 18:10:45 · 442 阅读 · 0 评论 -
react语种切换,react-intl-universal ,多语言切换,该语种切换是手动的,需要自己为不同语种进行数据准备,优点是更为精准;当然也可以用百度翻译api,准确度就不能保证了
逻辑:01:进入页面componentDidMount,默认简体中文,拿数据进行渲染getJson;02: onChange改变语种,刷新页面 ==> 01步骤结构及源码:1.主页面如下,yarn addreact-intl-universal 安装插件/** * @name LanguageChange * @description 语言切换 * @description 此处的语言切换,是手动替换,而非自动翻译后替换,保证了语言切换后的准确性 */import ..原创 2020-09-16 17:35:18 · 1011 阅读 · 0 评论 -
react 错误边界-Error Boundaries 使用
参考:https://zh-hans.reactjs.org/docs/error-boundaries.html1.环境:"react":"^16.13.1","http-proxy-middleware":"^1.0.5",2.注意事项:错误边界在开发环境中,不起作用;打包后有效;关于react打包及跨域,和刷新后404可看以下文档react 开发环境-生产环境-跨域处理react 打包刷新 页面4043.测试代码import React, { Comp..原创 2021-01-18 09:59:22 · 501 阅读 · 0 评论 -
react 打包刷新 页面404
参考:https://www.ziji.work/nginx/react-browser-router-404.html环境:"react":"^16.13.1","react-router-dom":"^5.2.0",react打包前端自启服务,使用nginx处理跨域;可以看这里:react 开发环境-生产环境-跨域处理1.方案一:前端处理将BrowserRouter 改为HashRouter代码:import { BrowserRouter,HashRouter } fr...原创 2021-01-18 09:30:46 · 648 阅读 · 0 评论 -
react 开发环境-生产环境-跨域处理
1.环境"react":"^16.13.1","http-proxy-middleware":"^1.0.5",2.创建setupProxy.js文件,内容如下:** 注意文件位置,默认在src下,可根据下图,自行设置3.代码:/** * @desc 配置开发环境代理 */const { createProxyMiddleware } = require('http-proxy-middleware')const createProxy = (url = '',..原创 2021-01-15 17:24:51 · 1897 阅读 · 3 评论 -
React 全局监听路由变化
参考:https://blog.csdn.net/weixin_43233914/article/details/1079584451.环境"react":"^16.13.1","react-router-dom":"^5.2.0",2.在入口文件添加以下代码import { withRouter } from "react-router-dom";componentDidUpdate() { console.log("===",window.location.path..原创 2021-01-14 11:12:31 · 792 阅读 · 0 评论 -
react-router路由跳转提示,自定义弹框样式;
1.版本react-router@4.x2.引入import{BrowserRouter,Prompt}from"react-router-dom";3.代码const getConfirmAtion = (message = "", callback = false) => { Modal.confirm({ title: message, onOk: () => { callback(true); }, onCance...原创 2021-01-13 17:01:25 · 646 阅读 · 0 评论 -
react中dangerouslySetInnerHTML使用(简洁)
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。本文链接:https://blog.csdn.net/exploringfly/article/details/80582859收起在react中,通过富文本编辑器进行操作后的内容,会保留原有的标签样式,并不能正确展示。在显示时,将内容写入__html对象中即可。具体如下:<div dangerouslySetInnerHTML = {{ __html: ch...转载 2020-11-26 15:42:07 · 1132 阅读 · 0 评论 -
highlight 动态加载代码,样式失效解决
1.参考:使用highlight.js高亮你的代码 - Ermu丨 - 博客园 (cnblogs.com) highlight 动态添加代码,样式失效_万恩铭的博客-CSDN博客官网:How to use highlight.js2.结果:highlight.js可以高亮代码,效果如下3.问题:看了参考的文章,静态数据渲染没有问题,但我在项目中动态加载数据,样式始终不出来,用了highlightBlock,highlightAuto依旧不行;在官网找到了原因,是...原创 2020-11-23 10:48:39 · 3087 阅读 · 0 评论 -
监听鼠标滚轮+控制只打印一次
参考:http://blog.sina.com.cn/s/blog_78106bb10101dgwp.htmllet scrollNum = 0;componentDidMount() {//在页面添加滚轮事件 window.onmousewheel = document.onmousewheel = this.scrollFunc; window.addEventListener("DOMMouseScroll", this.scrollFunc);}componentWil原创 2020-11-11 11:44:57 · 205 阅读 · 0 评论 -
three.js学习:react + OrbitControls is not a constructor 问题处理
1.在当前页引入OrbitControlsimport "three/example/js/controls/OrbitControls"2.进入three/example/js/controls/OrbitControls中,添加以下代码import * as THREE from "three"3.重启项目原创 2020-07-23 15:02:39 · 9266 阅读 · 0 评论