react的生命周期
摘要：react的生命周期是什么？ 生命周期是一个组件从生到死的一个过程，react为生命周期提供了一些关键节点，即会被触发的事件，来让组件方便处理各种场景 react的生命周期分为哪几个阶段？每个阶段的作用？ 分为3个阶段，分别是： 1. Mounting（挂载阶段）——创建构造函数并初始化，让我们在页
阅读全文
使用react组件拼接页面的2种方式
摘要：第一种：纯组件形式引用，比如<组件名 />（推荐） 使用class定义了一个名为HeaderEs6的组件，然后在render方法中引入这个组件 <HeaderEs6 />， 如果有多个组件要引用，根据对应关系添加在<HeaderEs6 />前后即可 import React from 'react'
阅读全文
react组件的2种写法
摘要：react组件写法1——函数式 import React from 'react'; import ReactDOM from 'react-dom'; function Header() { return <h1>I am header</h1> } function Footer() { ret
阅读全文
react事件处理的2种方式
摘要：事件处理1：给某元素绑定事件，执行的方法需要添加bind() import React from 'react';import ReactDOM from 'react-dom'; class HeaderEs6 extends React.Component { //constructor用来初始
阅读全文
react jsx基础语法使用
摘要：jsx是什么？ 它不是一种新的语法，而是JavaScript的语法扩展，为函数调用和对象构造提供了语法糖， 特别是 React.createElement()。jsx本质就是Javascript。 使用jsx的好处？ 1. 编写模版更简洁快速 2. 为声明式，不需要像jquery这种命令式一样，必须
阅读全文
三目运算怎么嵌套使用以及在antd Tag组件中的使用
摘要：基本使用 条件 ？结果1 ：结果2 例：true ? 1 ：2 如果条件为true，结果为1，否则结果为2，相当于 if else 嵌套使用 三元运算嵌套只能是用在第二个结果中进行嵌套 条件1 ？结果1 ：条件2 ？结果2 ：结果3 例：true ? 1 : false ? 2 : 3 如果条件为t
阅读全文
react中simdiotr富文本的基础使用
摘要：simditor是什么？ 一个基于浏览器的文本编辑器，也就是我们通常说的富文本 simditor官网 https://simditor.tower.im/ （simditor官网） https://github.com/mycolorway/simditor (github) simditor安装
阅读全文
react antd中codemirror的基本使用
摘要：codemirror是什么？ 使用JavaScript为浏览器实现的多功能文本编辑器。 codemirror作用 专门用于编辑代码，并带有实现更高级编辑功能的多种语言模式和附加组件。 codemirror官网 https://codemirror.net/ （全英文，我这种英语渣渣是直接谷歌翻译的，
阅读全文
react在移动端中使用antd-mobile的dreawer抽屉组件踩坑记录
摘要：1. 如果在使用过程中报这个错，意思是Drawer组件必须有一个子组件children，但现在还未定义 用官方例子解释就是<Drawer>这里面必须要有内容，如下图红色框部分内容</Drawer> 而这里面的内容一般为自定义代码 2. 如果你想让弹出的侧边导航栏在页面右侧 不要在state中设置 而
阅读全文
react中实现滚动到指定位置固定显示导航栏，反之浸入背景
摘要：需求描述 当导航栏置顶时，导航栏沉浸在背景图里；当鼠标滑动滚轮到一定位置时，显示导航栏 用原生JS实现 给window添加scroll滚动事件并执行对应方法，这里执行方法为handleScroll react中实现 在react中如果要使用上面的代码，需要使用生命周期函数componentDidMo
阅读全文
react antd表单不用form.create方法怎么设置input 回显值
摘要：前言 最近在用react antd学做公司后台管理系统，遇到一个小问题， 想要点击编辑按钮后把作品描述中的小猫搭桥的值回显在modal弹出框中的input中 antd表单组件的form.create()中有一个getFieldDecorator()提供了initialValue属性来显示input回
阅读全文
react antd Tabs组件如何修改默认样式-友好的解决方法
摘要：前言 当在项目中使用react antd各组件时，总有需要自定义css样式的时候，那应该怎么修改呢？ 最简单粗暴的方法——覆盖原有样式 审查元素找到要修改的tabs组件类名，然后在css文件中重写该类样式使其覆盖原有样式，若无效果，添加!important 最直接了当的方法——添加行内样式 但上述方
阅读全文
react-app-rewired start 启动失败报错解决方法
摘要：前言 关于该报错，我找到了4种可能的解决方案 ①：npm install之后再运行npm start （推荐优先使用这种） https://blog.csdn.net/qq_42584411/article/details/92841803 ②：react-app-rewired降到2.0版本 ht
阅读全文
react路由5到底要怎么使用（基础向）
摘要：前言 最近因项目需要开始使用react，很快遇到一个问题，首页的导航需要用到react-router， 但网上铺天盖地都是路由4.0的使用博文，而我的路由版本是最新的5.0，这让我很是苦恼。 最后几经波折，终于试出了路由5的用法，总结如下，希望帮到有需要的小伙伴 安装（新版指路由5，旧版指路由4）
阅读全文
react中img引入本地图片的2种方式
摘要：前言 以前我们用img引入图片只需要如下即可 但在react中不允许使用这种方式，会报错，下面我简单总结了2种方式 方式一：通过!important引入（推荐） 然后在img中直接引入变量即可，这个变量名字可任意取 方式二：require方法引入 require中只能写字符串，不能写变量 注：一般推
阅读全文
react中如何写404页面
摘要：前言 首先我们来思考一个问题，为什么要有404页面？ 1：优化SEO，让蜘蛛爬虫，也就是搜索引擎能更好的爬到 2：优化用户体验，当用户输错访问网站网址或网络故障时不显示空白页，而显示404页面 react中只需要在路由中加上这行代码即可 下图为路由5的写法，<Route>需要嵌套在<Switch>中
阅读全文
react中使用css的2种方式
摘要：第一种：行内样式，直接写在 style={{}} 中即可 ， 最外层{}表示是一个表达式，里面的{}表示是一个对象 第二种：使用className 以前写css定义类用的是class 现在要用className 那为何在react的jsx语法中不能直接使用class定义css类呢， 因为react把
阅读全文
react环境搭建
摘要：①：安装nodejs，它会自动帮你安装npm管理包工具 ②：去官网安装react脚手架工具，https://reactjs.org/ 然后点击Docs后，点击右边Create a New React App ③：输入命令：npx create-react-app 你的项目名字 这一步也可以直接输入：
阅读全文
react中怎么引入json文件和使用里面的数据
摘要：前言 初次使用react开发项目，顺便记录一下，技术有限，欢迎留言指正 第一种：直接import引入 需要使用json-loader模块，如果你是使用create-react-app来构建项目，那么该模块已经包含在内， 你只需要用import像引入组件那样引入json文件即可， import dat
阅读全文