随笔分类 - React
摘要：1. params参数 形式：/home/1/aa // 声明式导航 <Link to={`home/${id}/${name}`}> // 编程式导航 navigate(`page/${id}/${name}`); ... // 需要在路由里声明传参的key值 <Route path="home/
阅读全文
摘要：1. 父子传值 父传子使用props，父组件更新视图改变props子组件会同步更新。 类组件 import React, { Component } from 'react'; class Father extends Component { state={ count: 0 } render(){
阅读全文
摘要：1. 安装插件 npm install pubsub-js --save-dev 2. 在需要发布消息的组件引入使用 import pubsub from 'pubsub-js'; ... // 发布消息 pubsub.publish('name','hello world') 3. 在需要订阅消息
阅读全文
摘要：// 动态类名 <div className={flag?'class1':'class2'}>111</div> // 多类名 <div className={[flag?'class1':'class2','class3','class4'].join(' ')}>111</div>
阅读全文
摘要：1. useRef可以进行状态管理和获取DOM节点 1-1状态管理 useRef和useState类似，都可以用来保存数据状态，但是useRef更新数据是同步的，且不会触发视图更新。 useRef返回一个对象，初始化数据保存在current字段下 import {useRef} from 'reac
阅读全文
摘要：我们在类组件中实现状态管理使用state，在函数式组件中实现状态管理则是使用useState（hook）。 state和useState都是异步更新数据，都可以触发视图更新。 1. 类组件 数据保存在state中，更新数据使用setState setState有两种用法 函数式 state={ co
阅读全文
摘要：react没有语法糖，循环和条件判断都是通过原生js来实现 1. 条件判断 // 三元表达式 const getDiv = (flag)=>{ return ( <div>XXX</div> {flag?<div>条件1</div>:<div>条件2</div>} ) } ... // if判断 c
阅读全文
摘要：这是由于ant v4.20+优化了导航菜单Menu的使用方式，采用优化后的方式使用菜单组件就可以了。 更新前： <Menu onClick={this.handleClick} style={{ width: 256 }} defaultSelectedKeys={['1']} defaultOpe
阅读全文
摘要：router.js import React, { Component } from 'react'; import { Routes, Route, Navigate } from 'react-router-dom'; {/* 引入组件 */} import Home from 'XXX'; i
阅读全文
摘要：react中属性的命名方式都是小驼峰(如：className、onClick) 1. 数据绑定 react中的数据绑定是使用大括号{} <div className="content">{aa}</div> // 函数式组件 <div className="content">{this.state.
阅读全文
摘要：目前react官网已经不建议下载create-react-app脚手架到本地的方式来搭建项目了，我们可以直接用npx的方式来快速搭建react项目。我本地用的node版本是18.xxx的，如果是低版本的node和npm的话执行命令会失败（我之前用的node版本是14.xxx的，创建项目一直失败，试了
阅读全文
摘要：当我们react项目中使用a标签但是没加href属性时，会看到如下警告： The href attribute is required for an anchor to be keyboard accessible. Provide a valid,navigable address as the
阅读全文
摘要：react路由模块react-router-dom的6.x版本较老版本有较大改动，具体用法如下： 1. 下载react-router-dom npm i react-router-dom --save 2.在入口文件引入BrowserRouter包裹App根组件 index.js import Re
阅读全文
摘要：package.json { "scripts": { "start": "set PORT=4400 && react-scripts start", // 注意修改端口号要写在前面 "build": "react-scripts build", "test": "react-scripts te
阅读全文
摘要：当我们使用React 18 版本构建项目时，通常我们运行项目的时候会在控制台看到这样的报错信息 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch
阅读全文
摘要：1. 下载依赖包 npm i http-proxy-middleware --save 2. 在src根目录下新建setupProxy.js 文件（注意setupProxy文件名不要拼错，否则不生效！！！） setupProxy.js const { createProxyMiddleware }
阅读全文
摘要：react框架没有自己的http模块，所以我们通常使用第三方模块来实现接口请求，在这里我是使用axios来实现。 我们可以自己封装下axios请求，这样的话我们在使用接口时会更加的方便和统一管理。 1. 首先我们先下载axios依赖包： npm i --save axios 2. 接着我们新建一个a
阅读全文
浙公网安备 33010602011771号