react
文章平均质量分 81
很不错!
这个作者很懒,什么都没留下…
展开
-
React访问控制
场景:用户必须登录才能访问后台首页,否则不能进入后台主页,因此,就需要对项目进行登录访问控制,让需要登录才能访问的页面,必须在登录后才能访问。 在没有登录时,直接跳转到登录页面,让用户进行登录。在vue中有导航守卫,react中没有导航守卫,需要自己封装.react-router-dom 文档 :React Router: Declarative Routing for React.jshttps://v5.reactrouter.com/web/example/auth-workflow..原创 2021-11-21 23:10:04 · 1068 阅读 · 0 评论 -
React中如何在非组件环境下拿到路由信息?
如上图代码,我们在拦截器里面不能直接使用history进行跳转,而用location.href直接复制会导致页面刷新,那么如何在非组件内直接使用history进行页面跳转?参考代码:https://github.com/remix-run/react-router/blob/v5/packages/react-router-dom/modules/BrowserRouter.js首先react-router-dom中直接有Router这个包,但是它Router 没有history属性,在安装r...原创 2021-11-18 21:05:14 · 771 阅读 · 0 评论 -
从零开始React(8)==>hooks进阶
一.如何用useEffect发送请求?在hooks基础里面我们了解到useEffect里面可以进行:数据(Ajax)请求、手动修改 DOM、开启定时器,清空定时器,添加事件监听,删除事件, localStorage 操作等,那么我应该如何在useEffect里面进行发送请求呢?示列代码:import React, { useEffect } from 'react'import ReactDom from 'react-dom'import axios from 'axios'expor原创 2021-11-17 23:14:07 · 223 阅读 · 1 评论 -
React中引入eslint 环境配置
目标:在react项目中配置elint,并启用保存自动化格式功能.思路:在项目中安装eslint 用eslint的init指令创建eslint配置文件 设置vscode中的自动保存格式化命令步骤 终端中输入命令 (安装ts的指令 非必须但是ts格式化格式更高级) npm i eslint typescript2.在项目根目录,运行npx eslint --init 3.按照交互提示安装相关插件 3.1.选择是是否使用TypeScript,...转载 2021-11-17 20:14:55 · 520 阅读 · 0 评论 -
从零开始React(7)==>hooks基础
在之前我们了解到有状态组件和无状态组件有状态组件:能定义state的组件。类组件就是有状态组件,无状态组件:不能定义state的组件。函数组件又叫做无状态组件(在rect16.8后引入了React Hooks ,函数组件也能定义自己的状态)函数组件在没有引入hooks之前是无状态组件,而在引入了hooks后,函数组件也可以定义自己状态.Hooks是什么?Hooks 只能在函数组件中使用 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性(state 及生命周期等特性的函原创 2021-11-13 15:25:09 · 731 阅读 · 0 评论 -
从零开始react(6)=>setState进阶
先上代码:export default class App extends Component { state = { n: 1 } hClick = () => { this.setState({n: 100}) console.log(this.state.n)// 这里打印是多少? console.log(document.getElementById('span').innerHTML) // 这里打印是多少? } render原创 2021-11-11 23:30:56 · 580 阅读 · 0 评论 -
从零开始react(5)=>react组件进阶
props校验-基本使用:在之前博客中我们有提到关于props的校验.如图:props校验:对于子组件来说,props是外来的(是接受父组件传过来的参数的),无法保证组件使用者传入什么格式的数据,有了类型校验,我们的程序就更加健壮了。props的基本使用:导入 prop-types 包 。这个包在脚手架创建项目时就自带了,无须额外安装 使用组件名.propTypes = {属性名1: 类型1, ...} 来给组件的props添加校验规则(固定写法)如图所示:作用:规定接...原创 2021-11-10 19:01:05 · 970 阅读 · 0 评论 -
从零开始react(4)
在之前的博客我们学习了组件和组件状态修改,今天我们继续学习一下组件通讯一.组件通讯组件通讯:件是独立且封闭的单元,默认情况下,只能使用组件自己的数据,在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能。 而在这个过程中,多个组件之间不可避免的要共享某些数据,为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通。这个过程就是组件通讯.在我们了解了什么是组件通讯,我们来认识一下组件通讯的三种方式:父子组件之间 兄弟组件之间 跨组件层级父子组件之间:.原创 2021-11-08 20:43:10 · 237 阅读 · 2 评论 -
从零开始react(3)
在学习过react组件和react组件状态后,我们继续来学习react组件的状态-修改状态.组件的状态-修改状态:在之前我们知道定义状态是使用state = 对象来做初始化,那么我么在做修改状态是直接修改state中的值来来让视图变化么?答案肯定不是来直接修改state里面的值来让视图变化,在react中状态是不可变的,就是说不要直接修改当前状态值,而是创建新的状态值.而要修改就需要用到setState函数.setState函数:语法 :this.setState({ 要修改的部分数据原创 2021-11-07 15:37:52 · 65 阅读 · 0 评论 -
从零开始react(2)
一.react组件简绍组件分类: 基础组件:指input、button这种基础标签,以及antd封装过的通用UI组件 业务组件:由基础组件组合成的业务抽象化UI。例如公司部门信息的下拉框 区块组件:由基础组件组件和业务组件组合成的UI块 页面组件:展示给用户的最终页面,一般就是对应一个路由规则 具体组件使用可以去这个博客看看:React学习:组件(Components)_若水弹丸之地-CSDN博客二.react组件的两种创建方式使用 JS 中的函数创建组件原创 2021-11-06 21:35:11 · 81 阅读 · 0 评论 -
从零开始react(1)
一.React脚手架-从零开始创建项目创建方式1:先全局安装脚手架工具包 (命令:npm i -g create-react-app ) 用脚手架工具来创建项目(create-react-app your-project-name(your-project-name 表示项目名称,可以修改 ))创建方式2:直接使用npx来创建项目:npx create-react-app your-project-name目录:二.理解react-dom在package.json文件中:...原创 2021-11-05 21:27:13 · 122 阅读 · 0 评论