react
不知名程序猿丶
过去无法挽回,未来可以改变
展开
-
使用vite创建react
2, 使用vite构建项目, 选择react。3, 切换到项目根目录, 安装依赖包。4, 运行,启动vite项目。1, 安装vite构建工具。原创 2023-06-28 14:39:12 · 480 阅读 · 1 评论 -
react中查找DOM的方法
2, 在构造器中创建ref全局变量, 在标签中ref属性动态绑定这个全局变量, 通过全局变量的current字段调用。1, 在父组件中用ref获取子组件对象, 必须保证子组件是类组件, 函数式组件获取结果是undefined。1, 给标签设置ref属性, 通过this.refs调用 (老版本语法,将要废除)2, 父组件使用ref获取子组件对象后, 可以对子组件状态数据和函数执行调用和修改。3, 在标签ref属性绑定函数, 在函数中定义全局变量赋值, 通过全局变量调用。4, 使用hook语法查找DOM。原创 2023-06-28 14:39:57 · 251 阅读 · 1 评论 -
在vite中构建react配置代理
在vite.config.js中加入以下代码 (针对react,可全选替换)使用vite构建vue项目和react项目,配置代理等信息的方式是一样的。原创 2023-06-28 17:33:52 · 158 阅读 · 1 评论 -
在weibpack中构造react配置代理
也可以通过指令 npm run eject 把服务器配置暴漏出来, 修改scripts/start.js (这个指令不可逆)设置项目端口号: node_modules/react-scripts/scripts/start.js。1, 下载安装代理模块。原创 2023-06-28 17:34:33 · 41 阅读 · 1 评论 -
在react中如何实现样式隔离
2, 在组件jsx导入样式文件时使用 import styles from './xxx.module.css' 导入 代替 import './xxx.css'1, 创建组件样式文件时以 xxx.module.css命名, 例如 Home.module.css 代替 Home.css。如果需要每个组件样式隔离, 在设置组件样式时, 每一个选择器都添加组件根标签选择器, 以区分不同组件中的样式。4, 在xxx.module.css中通过 .yyy{} 设置样式,即为局部样式。原创 2023-06-28 17:35:36 · 235 阅读 · 1 评论 -
React路由5.0配置
{/* 路由重定向, 使用Redirect组件实现, 要写在最后 */}2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件。3, 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route。(注: 哈希模式用HashRouter 历史模式用BrowserRouter)7, 在需要跳转的页面, 从路由模块导入工具组件 Link。6, 在根组件app模板中添加路由组件,即路由出口。4, 创建路由组件,配置路由, 并导出。原创 2023-06-29 16:15:24 · 81 阅读 · 1 评论 -
React路由6.0配置
注意: 使用router6.0实现的路由跳转, 不会向组件中传入路由信息, 可以在组件中从路由模块导出useLocation和useNavigate函数以实现路由相关功能。2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件。3, 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route。6, 在根组件app模板中添加路由组件,即路由出口。4, 创建路由组件,配置路由, 并导出。5, 在app.js中导入路由组件。原创 2023-06-29 16:16:11 · 152 阅读 · 1 评论 -
React路由跳转与传值
路由控制跳转的组件中(一般是views目录下的页面组件),props会自动添加以下三个字段, (根组件和components中的组件没有路由信息)接收 {this.props.location.data && this.props.location.data.name}动态路由(友好url)传值跳转个人中心 react路由传值方式2: 动态路由(友好url)传值。原创 2023-06-29 16:17:24 · 530 阅读 · 1 评论 -
React路由监听
2, 在组件的componentWillUnmount中取消路由监听, 调用 cancle函数, 以防止重复监听,浪费性能。1, 在路由跳转的组件中使用props.history.listen() 监听路由, 得到返回值cancle。注: 全局路由监听,根组件App中没有路由信息, 需要使用高阶组件withRouter添加路由信息,然后监听。注: 局部监听只能监听此组件离开时的路由, 类似于vue中beforeRouteLeave() 路由守卫。1, 在app.js中从路由模块导入withRouter。原创 2023-06-29 16:21:00 · 1009 阅读 · 1 评论