![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react 项目问题
文章平均质量分 70
AS_TS
这个作者很懒,什么都没留下…
展开
-
.env 环境变量使用,React项目中使用 .env.*等文件使用
一、公共环境变量二、环境变量(例如: 环境变量)在项目开发中,我们不可避免的会需要使用 环境变量,例如在定义接口 api 的 baseURL 时,会根据不同的环境,配置不同的根地址 baseURL。使用 命令创建的 react 项目,在使用 yarn run eject 命令将所有内建的配置暴露出来后,在 package.json 文件中,提供了一个 start 命令,和一个 build 命令,这两个命令在根据命令,可以在根目录的 scripts 文件夹下,找到 start.js、build.js原创 2023-06-20 11:23:50 · 3317 阅读 · 0 评论 -
react 项目模板搭建(2)—— 加入 react-router-dom v5 路由
一、安装路由原创 2021-09-15 15:20:24 · 766 阅读 · 0 评论 -
react 项目模板搭建(1)—— 加入 less 、 sass
一、使用脚手架搭建项目基础npx create-react-app my-app创建后会得到一个基础的 react 项目文件,如果不需要加其他配置,可以直接使用二、Create-React-App的Webpack配置npm run eject如果需要增加特殊配置,可以在根目录下使用这个命令,工具会给出提示,提示eject为不可恢复操作,输入y或者y开头的单词,即可进行eject。eject后,会在目录下发现几个新增的目录 config,script。script的内容为脚手架自己生成的,不用原创 2021-09-10 11:12:24 · 1741 阅读 · 0 评论 -
在 umi 中使用 .sass .scss
根据umi官方文档介绍CSS 预处理器Umi 内置支持less,不支持sass 和 stylus,但如果有需求,可以通过 chainWebpack 配置或者 umi 插件的形式支持。在没配置之前,使用 .sass 、 .scss 会编译报错这里就提供umi插件的形式,使代码中可以使用.sass 、 .scss 文件步骤如下:首先安装 umi插件 @umijs/plugin-sassyarn add @umijs/plugin-sass注意:安装的必须是 @umijs/plugi原创 2021-02-04 18:08:26 · 1651 阅读 · 0 评论 -
umi 配置路由 独立路由文件
umi 配置路由根据 umi ,官方文档的介绍,项目的路由写在 .umirc.ts 文件里的 routes 数组中import { defineConfig } from 'umi';export default defineConfig({ nodeModulesTransform: { type: 'none', }, routes: [ { path: '/', component: '@/pages/index', name:'首页'}, ], fastR原创 2021-02-02 18:12:49 · 2214 阅读 · 1 评论 -
react + typescript 中使用 G6
G6的官方文档中写了graph的各种用法,都是以js方式编写,在 拓展阅读 中有提供 react 中使用 G6 的 demo,可以参考。React 中使用 G6近期尝试了一下在 react + typescript 中使用 G6,因为 typescript 中有变量的类型定义,所以在定义变量时需要注意其类型最初将官方中的案例抠下来放入项目中,就会报出类型错误(只需要在定义 ref 时,给 ref 定义一个类型就可以了:const ref: any = React.useRef(null))(只需原创 2021-01-19 17:33:59 · 1746 阅读 · 1 评论 -
this.props.history.push 传参数 url、state 混合传参
1. url 传参一般跳转传递 id 都放入 url 中this.props.history.push(`/document-analysis/fans-list?id=${this.state.bloggerId}`)地址栏显示在跳转接收页 this.props.location 打印的路由参数2. state 传参跳转时需要带其他较多数据,无法在 url 上携带,可以使用 state 传值this.props.history.push({ pathname: `/document-a原创 2020-09-18 15:09:51 · 7685 阅读 · 3 评论 -
react-router-dom 简单使用
项目创建完成后,需要使用 router 时,react-router-dom 提供了 router 服务1. 下载安装 react-router-domnpm install --save react-router-dom或yarn add react-router-dom如果使用 Typescript ,需要安装一个 react-router-dom 的声明文件,vscode 会有提示yarn add @type/react-router-dom2. 组件引用 react-router-do原创 2020-09-04 11:20:52 · 668 阅读 · 0 评论 -
react 从 .js 转变为 .ts时,serviceWorker.js 改成 serviceWorker.ts 类型报错
在创建完react项目后,想使用typescript,给typescript设置了tsconfig.json后,出现了serviceWorker.js文件的报错找了以前的项目,查看了修复方式,其中config的类型报错,可以使用ts中的 type 来设置 config的类型而 process.env.PUBLIC_URL 报错,在首次编译之后会生成 react-app-env.d.ts 声明文件,错误会消失...原创 2020-08-21 17:55:51 · 870 阅读 · 0 评论 -
前端模糊匹配方式,前端正则模糊匹配
前端的匹配方式有很多这里简单提供模糊匹配方式:使用 RegExp 函数 正则表达式来进行匹配正则表达式var list = ['nai','43q','5xn']var keyWord = 'n'var arr = []var reg = new RegExp(keyWord)for(var i = 0; i < list.length; i++) { if(list[i].match(reg)) { arr.push(list[i]); }}return arr;原创 2020-08-17 15:47:31 · 3219 阅读 · 0 评论 -
antd key报错 Each child in a list should have a unique “key“ prop.
使用 react + antd 组件时,有时会报出 Each child in a list should have a unique "key" prop. 这样的错误这里列举几个相关的次错误报错和解决方式Table 表格解决方式:官方给 Table 组件提供了一个 rowKey 属性,用于给表格的每一行设定一个 key 值在 antd 官方文档底下也有相关解决办法:https://ant-design.gitee.io/components/table-cn/#APISelect 选原创 2020-08-13 16:14:40 · 30053 阅读 · 5 评论 -
antd table 固定列样式修改
antd的表格样式中 dark 模式下有些样式与实际设计不同,需要自行修改:.tableList { margin: 0 20px; // 隔行变色 .ant-table-tbody > tr:nth-child(2n-1) > .ant-table-cell-fix-left, .ant-table-tbody > tr:nth-child(2n-1) > .ant-table-cel原创 2020-07-24 10:48:53 · 3611 阅读 · 0 评论 -
antd 中 Table 组件 sorter 排序
antd 组件中的表格组件 Table 可以进行排序操作, Table 中的 Column 有个sorter属性,可以用来显示、控制排序sorter 属性接收 布尔值 (boolean) 或 函数(function),sorter 为 true 时可以显示排序标识,后端排序时则改为true前端排序时一般可以写一些简单的函数进行操作,例如官方的示例 sorter: (a, b) => a.name.length - b.name.length这里提供两种常用情况进行参考(使用的JSX格式)数字原创 2020-07-21 16:33:30 · 13344 阅读 · 0 评论 -
滚动条组件,react-custom-scrollbars
发现一个简单的滚动条npm包,这可以让我们抛弃浏览器原始的丑陋滚动条npm地址:https://www.npmjs.com/package/react-custom-scrollbarscnpm镜像地址:https://cnpmjs.org/package/react-custom-scrollbarsgitHub上的高级用法:https://github.com/malte-wessel/react-custom-scrollbars/tree/master/docsgitHub上API文档:ht原创 2020-06-30 14:57:38 · 7328 阅读 · 0 评论 -
typescript 中的组件传值与调用
// 父组件import React, {Component} from 'react';class Parents extends Component { constructor(props) { super(props); this.state = { } } componentDidMount() { } handleCancel = (e) => { console.log(原创 2020-05-27 10:53:51 · 2993 阅读 · 0 评论 -
raact setState()方法中使用Object.assign()可以只修改一个对象的部分属性
在使用 react 中 setState() 修改 state 中的对象属性时,可以使用 Object.assign() 方法,完成对象的修改public state = { optionValue: 'all', total: 10, form: { page: '1', size: '10', ref: '', userName: '', // 现在是空值 },}// 自定义的监听输入框变化函数public cha原创 2020-05-18 19:21:43 · 1326 阅读 · 0 评论