随笔分类 -  React

记录react的学习
vite构建的react+ts项目中使用less
摘要：下载less依赖 npm install less 组件很多之间可能有类名相同，导致样式冲突，因此制定导出规则，给类名加上hash值。在vite.config.ts配置中添加以下规则。 css: { modules: { hashPrefix: 'prefix', generateScopedNam 阅读全文
posted @ 2024-06-23 18:43 数星观月 阅读(551) 评论(0) 推荐(0) 编辑
react中事件冒泡导致弹窗关不掉
摘要：代码如下 <Modal actions={[ { text: 'Cancel', variant: 'secondary', onClick: () => setDeleteAutomatedReportModalVisible(false), }, /> 点击Cancel按钮，弹窗应该关闭才对，但 阅读全文
posted @ 2024-05-06 14:15 数星观月 阅读(63) 评论(0) 推荐(0) 编辑
react中的一些知识点
摘要：1、键盘按下事件：onKeyDown，使用实例如下 <input value={filterData.search} onChange={(e) => setFilterData({ ...filterData, search: e.currentTarget.value, })} placehol 阅读全文
posted @ 2024-04-09 13:13 数星观月 阅读(8) 评论(0) 推荐(0) 编辑
react中路由传参和url传参
摘要：一、如果路由跳转的页面是必须要一个参数的，那么可以在路由配置文件中的path中添加要传递参数的参数名。 path: 'account-info/:id' 接受参数的时候使用react-router-dom中的useParams函数就可以了。 const { id } = useParams() 二、 阅读全文
posted @ 2024-04-07 16:33 数星观月 阅读(265) 评论(0) 推荐(0) 编辑
React学习三：Redux和ReactRouter
摘要：Redux redux是一个仓库，用来存储数据。当react中多个组件需要用到同一个数据时，如果我们一次次地请求会比较麻烦，也会加大服务器的压力。这种多组件用到的数据就可以存放到redux仓库中。 redux仓库使用原生的依赖创建比较繁琐，为了更快创建使用"@reduxjs/toolkit"这个依赖 阅读全文
posted @ 2023-11-28 14:25 数星观月 阅读(166) 评论(0) 推荐(0) 编辑
React学习二：表单受控绑定、获取Dom、组件通信、useEffect、自定义Hook、useMemo
摘要：一、受控表单绑定 概念：使用react组件的状态（useState）控制表单的状态。双向绑定，数据变化视图也变，视图变数据也变。 import { useState } from 'react' function App() { const [content, setContent] = useSt 阅读全文
posted @ 2023-11-19 21:43 数星观月 阅读(210) 评论(0) 推荐(0) 编辑
React学习一：环境搭建、JSX基础、事件绑定、组件使用、样式控制
摘要：一、概念 React由Meta公司研发，是一个用于构建Web和原生交互界面的库。 react中文文档地址：https://zh-hans.react.dev/learn React的优势 相较传统基于DOM开发的优势：组件化的开发方式；不错的性能 相较于其他前端框架的优势：丰富的生态；跨平台支持 二 阅读全文
posted @ 2023-10-28 22:29 数星观月 阅读(78) 评论(0) 推荐(0) 编辑