![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 54
沉默小管
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
展开
-
【taro】taro获取元素的详细属性(已解决)
✨编写不易,还希望各位大佬支持一下\textcolor{gray}{编写不易,还希望各位大佬支持一下}编写不易,还希望各位大佬支持一下 📃 个人主页:\textcolor{green}{个人主页:}个人主页: 沉默小管📃 个人网站:\textcolor{green}{个人网站:}个人网站: 沉默小管🔥 技术交流QQ群:837051545\textcolor{green}{技术交流QQ群:837051545}技术交流QQ群:837051545 👍 点赞,你的认可是我创作的动力!\textcolor{.原创 2022-05-11 14:58:23 · 2160 阅读 · 0 评论 -
【ucharts】超详细介绍使用ucharts图表
✨编写不易,还希望各位大佬支持一下\textcolor{blue}{编写不易,还希望各位大佬支持一下}编写不易,还希望各位大佬支持一下 📃 个人主页:\textcolor{green}{个人主页:}个人主页: 沉默小管📃 个人网站:\textcolor{green}{个人网站:}个人网站: 沉默小管🔥 技术交流QQ群:837051545\textcolor{green}{技术交流QQ群:837051545}技术交流QQ群:837051545 👍 点赞,你的认可是我创作的动力!\textcolor{.原创 2022-04-30 19:47:31 · 10815 阅读 · 8 评论 -
【taro】taro打包微信小程序运行时报Cannot read xxx of undefined (reading ‘xxx‘)【详细流程】
问题原因Cannot read properties of undefined (reading ‘locale’)意思是:无法读取未定义的属性(阅读“语言环境”)解决流程我打包运行微信小程序时报出**Cannot read properties of undefined (reading ‘locale’)**时,根本就不知道哪个属性未定义,网上查找了说什么lodash引入错误~,我寻思,他是怎么找到是lodash引入错误。后来我发现微信小程序是打包后的报错信息,我看不到,那我就运行h5总应该可以原创 2022-04-28 17:47:13 · 1874 阅读 · 0 评论 -
【taro】taro编译h5报React Refresh runtime should not be included in the production bundle
当前设备:taro3.4.4问题原因React Refresh runtime should not be included in the production bundle意思是:React刷新运行时不应包含在生产捆绑包中解决流程办法一:1.强制设置为运行环境为development2.在package.json里设置"scripts": { xxx "dev:h5": "set NODE_ENV=development&&npm run build:h5原创 2022-04-28 17:33:25 · 1200 阅读 · 0 评论 -
【react】react使用echarts详细流程
项目介绍本项目(导航网后台,统计页)。在react+typescript使用echart的地图插件(bmap)1.首先我们得下载echartsnpm install echarts --saveoryarn add echarts --save如果你跟我一样使用了typescript,就需要安装echarts的装饰器npm install @types/echarts --saveoryarn add @types/echarts --save2.使用百度地图API,否者会报错BMa原创 2022-04-25 16:46:54 · 6487 阅读 · 0 评论 -
【react】react中使用document报‘HTMLElement | null‘ is not assignable to parameter of type ‘HTMLElement‘
问题原因我在使用react+ts框架使用document函数获取id名时报错:Argument of type ‘HTMLElement | null’ is not assignable to parameter of type ‘HTMLElement’.大概意思就是:‘HTMLElement | 类型的参数 null’ 不能分配给“HTMLElement”类型的参数。解决流程我把document.getElementById(“echartsmap”)别名为HTMLElement就可以了原创 2022-04-24 16:39:44 · 3662 阅读 · 0 评论 -
【taro】taro使用React.lazy懒加载组件,微信小程序动态导入失败(报错)
问题描述公司项目需要动态加载ucharts的组件,我使用react.lazy懒加载组件,在h5环境下是可以正常显示,但是在微信小程序,他就报错说找不到该组件,后来查了taro官网才知道,微信小程序不能懒加载,只能提前一次性加载完进行调用(意思就是import xx from “组件名”)以下代码就是运行微信小程序时报的错误。报错意思就是找不到该模块,但是我文件的确是有的不兼容微信小程序的错误代码解决流程在代码中判断当前运行的环境(h5还是微信小程序),然后针对性的对微信小程序上的组件进行动态原创 2022-04-13 17:31:43 · 2293 阅读 · 0 评论 -
【taro】taro微信小程序input在苹果手机上光标聚焦不对的解决办法
问题原因我打开我的安卓机测试taro的input标签,没问题~,但是我旁边的小组长打开他的buliangbuliang的苹果手机使用taro中的input,聚焦的时候,光标自动跑到最左边!!解决办法俺查看了taro文档,发现了cursor的属性,添加之后,正常了~代码://props是input框输入的值<AtInput key={"1"} cursor={props.length} type="text"/>欢迎加入前端全栈开发交流圈一起吹水聊天学习交流qq群:8370515原创 2022-04-01 14:04:39 · 1674 阅读 · 0 评论 -
【next】nextjs打包后出现passHref is missing
解决流程import Link from 'next/link'const NavLink = ({ href, name }) => { return ( //添加passHref <Link href={href} passHref> {name} </Link> )}export default NavLink个人网站:沉默博客如有错误,请多多指教。如对你有帮助,给个赞吧。...原创 2022-02-27 14:16:28 · 421 阅读 · 0 评论 -
【next】nextjs打包出现组件定义缺少显示名称【Component definition is missing display name】
解决流程Component definition is missing display name组件定义缺少显示名称在内容里定义名称const ShowMsgBox: NextPage<any> = (props:any,ref: any) => { return ( <>1111</> )}//显示的名称ShowMsgBox.displayName = "ShowMsgBox"export default Show.原创 2022-02-27 14:08:30 · 580 阅读 · 0 评论 -
【react】父级调用子级的函数方法(函数和类组件)
解决流程父级(函数组件)const CommonLayout: NextPage = (props: any) => { const footRef = useRef() const [height, setHeight] = React.useState<number | string>(0) //底部高度变化 const handleFooterHeight = () => { let val = footRef.current原创 2022-02-19 14:15:21 · 1599 阅读 · 0 评论 -
【css】css中使用calc的计算失效
问题原因css格式错误,加减之间需要有空格解决流程const CommonLayout = (props: any) => { return ( <div style={{ minHeight: `calc(100vh - 58px))` }}> 11111 </div> )}正确代码为calc(100vh - 58px))错误代码为calc(100vh-58px))个人网站:沉默博客如有原创 2022-02-19 14:07:05 · 986 阅读 · 0 评论 -
【react+ts】react使用HOOK钩子监听窗口变化
解决流程CommonLayout.tsx文件代码const CommonLayout: NextPage = (props: any) => { let { renderContent, nav,link } = props; const footRef = useRef() const [height, setHeight] = React.useState<number | string>(0) //底部高度变化 const handl原创 2022-02-19 14:00:48 · 2219 阅读 · 0 评论 -
【react17+ts】react项目封装axios网络请求并使用-04
1.安装基于 promise 的网络请求库axiosnpm install axios2.axios封装与使用2.1 request.js对axios的封装import axios from 'axios';import {baseInfo} from "../common/config";import {getToken,removeToken,removeUsername,removeUserId} from "../common/storage";let baseURL = baseI原创 2022-02-09 13:55:57 · 1816 阅读 · 2 评论 -
【react17+ts】react使用react-router-dom动态生成路由-03
1.index.tsx存放项目路由import React,{lazy} from "react";import RouterInterface from "@/router/routerInterface";//lazy懒加载路由,按需加载视图const Login = lazy(() => import("@/views/v1/login/Login"));//普通用户const UserOperation = lazy(()=>import('@/views/v1/userO.原创 2022-02-09 01:26:36 · 1653 阅读 · 6 评论 -
【react17+ts】react初始化项目目录结构-02
1.assets: 存放样式与图片2.components: 项目的组件3.interface: 整个项目的接口声明4.network: 对应每个页面请求的接口5.router: 项目路由 6.views: 项目的视图代码,每个文件对应每一个模块7.common: 项目的工具类-config.js 项目配置内容-storage.js 项目的缓存类-utils.js 项目公共的工具类8.App.less .原创 2022-02-09 00:47:16 · 1082 阅读 · 0 评论 -
【react17+ts】antd语言包全局设置
解决流程在项目index.tsx文件:import React from 'react';import ReactDOM from 'react-dom';import App from './App';import {ConfigProvider} from "antd";import moment from 'moment';import 'moment/locale/zh-cn';import locale from 'antd/lib/locale/zh_CN';ReactDOM.原创 2022-01-31 15:17:08 · 1085 阅读 · 0 评论 -
【react17+ts】axios请求数据,node获取不到值
问题原因前端我使用formdata包裹数据,发送请求let data = new formdata()data.append('a','值');axios.post(url,data).then(res=>{ console.log('res=>',res); })解决步骤formdata默认请求是以 ‘Content-Type’: ‘application/json’ 发送请求,导致后端node获取不到键值对获取数据,所以我使用URLSearch原创 2022-01-29 10:56:55 · 915 阅读 · 0 评论 -
【taro】taro-ui 3.0.0-alpha.3 表单提交按钮点击后报错
问题代码逻辑代码//验证onValidateField = (value, rules) => { const validator = new Schema(rules); return new Promise((resolve) => { // @ts-ignore return validator.validate(value, (errors, fields) => { if (errors) { resolve(errors原创 2022-01-27 13:39:25 · 1171 阅读 · 10 评论 -
【taro】taro开发微信小程序抛出btoa is not defined
解决流程微信小程序内没有btoa函数,所以需要引入第三方import { weBtoa, weAtob } from './weapp-jwt.ts'weBtoa("xxxxx");weapp-jwt.ts或者weapp-jwt.js下载地址https://github.com/equicy/weapp-jwt-decode个人网站:沉默博客如有错误,请多多指教。如对你有帮助,给个赞吧。...原创 2022-01-27 13:19:11 · 1960 阅读 · 0 评论 -
【taro】taro路由不能跳转到tabbar(微信小程序)
解决流程1.主要代码/pages/home/index是tabbar路由Taro.navigateTo({ url: '/pages/home/index' }).catch((error) => { if (curEnv(Taro.getEnv()) === "wx") { wx.switchTab({url: '/pages/home/index'}) } /* 跳转到 t原创 2022-01-27 10:32:58 · 1110 阅读 · 0 评论 -
【react+ts】react项目中this.props找不到location方法
问题描述我想想在react+ts项目中获取本地信息,所以就是用了this.props.location.pathname但是报错说找不到location,我特喵的就很纳闷解决流程1.先使用react-router-dom中的withRouter函数包住当前类组件import {withRouter} from "react-router-dom";class ReservationList extends Component<InitProps, InitState>{ render原创 2022-01-26 21:37:47 · 2081 阅读 · 0 评论 -
【taro】taro-ui使用AtGrid组件,显示icon图标
问题描述特喵的taro-ui官网只有image的例子,icon图标的例子居然没有~。我再仔细一看,我…,然后呢?传字符串?还是传对象属性?什么都不说解决流程直接上代码<AtCard title="标题" > <AtGrid onClick={this.handleClick} data={ [ { image:"", iconInfo:{原创 2022-01-26 14:45:43 · 1098 阅读 · 0 评论 -
【react+ts】找不到less类型,Cannot find module ‘./xxx.module.less‘ or its corresponding type declarations
问题描述Cannot find module ‘./index.module.less’ or its corresponding type declarations找不到less后缀名的类型解决办法在src目录下创建类型声明文件react-app-env.d.ts,并且声明less类型内容如下declare module '*.module.less' { const classes: { readonly [key: string]: string }; export de原创 2022-01-26 00:58:03 · 5400 阅读 · 3 评论 -
【taro】taro设置顶部标题
方法一:在页面下创建xx.config.ts设置当前页面标题:export default { navigationBarTitleText: "登录", };方法二:在xx.tsx中设置当前页面标题:config = { navigationBarTitleText: '登录' }个人网站:沉默博客如有错误,请多多指教。如对你有帮助,给个赞吧。...原创 2022-01-20 10:10:30 · 2202 阅读 · 0 评论 -
【javascript】Cannot set properties of undefined解决办法
问题代码let msgList:any; errors?.map((error: { field: React.ReactText; message: any }) => { msgList[error.field] = error?.message || ""; }); console.log(msgList);报错信息:TypeErrorCannot set properties of undefined (setting 'user')问题原因msgList这原创 2022-01-19 14:20:36 · 64447 阅读 · 3 评论 -
【taro】taro取消路由上的#
解决流程在项目config/index.js修改以下内容h5: { publicPath: '/', staticDirectory: 'static', postcss: { autoprefixer: { enable: true, config: { } }, cssModules: { enable: false, // 默认为 false,如需使用 css modules原创 2022-01-17 15:01:01 · 513 阅读 · 0 评论 -
【taro】无法使用 JSX,除非提供了 “--jsx“ 标志
问题原因taro项目中使用ts,但是没有设置ts的相关配置解决办法在项目根目录创建tsconfig.json,添加以下内容{ "compilerOptions": { "jsx": "react", "experimentalDecorators": true, // 主要是这个 }, "exclude": ["node_modules"], "include": ["src"] } 个人网站:https://www.php-chi原创 2022-01-17 14:41:35 · 3171 阅读 · 3 评论 -
【taro+react】taro设置路径别名
1.找到项目根目录config/index.js2.添加以下内容const path = require('path')const config = { alias: { '@actions': path.resolve(__dirname, '..', 'src/actions'), '@assets': path.resolve(__dirname, '..', 'src/assets'), '@components': path.resolve(__dirname,原创 2022-01-14 17:37:31 · 1369 阅读 · 0 评论 -
【taro】taro如何打开微信小程序
1.在项目根目录输入npm run dev:weapp最后会出来这么一堆文字Tips: 预览模式生成的文件较大,设置 NODE_ENV 为 production 可以开启压缩。Example:$ set NODE_ENV=production && taro build --type weapp --watch启动 开发者工具-项目目录 D:\xx\xx\dist生成 工具配置 D:\xx\xxx\dist/project.config.json编译 发现入口原创 2022-01-14 14:49:04 · 2672 阅读 · 1 评论 -
【react+ts】Object is possibly ‘undefined‘. TS2532解决方案
问题描述state={ data:[{a:1}]}test = ()=>{this.state.data.length >= 1 ? (<div>成功了</div>) : null}this.state.data这里报错解决流程使用typescript的类型断言(手动指定某个值的类型)state={ data:[{a:1}]}test = ()=>{(this.state.data as Array<any>).length原创 2022-01-05 14:13:10 · 3732 阅读 · 0 评论 -
【react】react项目运行npm run eject报错解决办法
报错原因脚手架添加.gitgnore文件,但是却没有本地仓库。解决流程常用办法:cd project //进入项目根目录git init // 当前目录新建代码库git add . // 添加当前目录所有文件到暂存区git commit -m 'Saving before ejecting' // 提交暂存区到仓库区npm run eject //项目根目录运行如果运行npm run eject报错,查看项目根目录package.json文件,添加eject: react-scr原创 2021-12-24 16:28:14 · 2121 阅读 · 0 评论 -
【react+ts】react配置使用less
问题原因react+ts项目中找不到login.less模块,没有配置查找less和css后缀,项目默认找node_modules里的模块,所以我们需要在配置项中添加less和cssimport style from "./login.less"解决流程在项目src目录中的globals.d.ts添加以下代码,如果没有globals.d.ts文件可以创建一个declare module "*.less";declare module "*.css";个人网站:https://www.php原创 2021-12-24 12:32:00 · 1426 阅读 · 0 评论 -
【react+typesciprt】react+ts中props.history报错,找不到
问题代码interface CurProps {}interface dataInterface{ data?:any, message:string|number, code:number}interface resInterface{ data:dataInterface}class Login extends Component<CurProps, CurState>{ constructor(props:CurProps){原创 2021-12-24 01:49:32 · 1100 阅读 · 0 评论 -
【react+ts】Module not found: Can‘t resolve ‘react-router-dom‘
Module not found: Can't resolve 'react-router-dom'原创 2021-12-22 16:34:08 · 4144 阅读 · 1 评论 -
【react】react动态修改多级对象数值解决办法集合
react动态修改多级对象数值解决办法集合原创 2021-12-22 00:53:01 · 561 阅读 · 0 评论