React学习
关注
分享
扫一扫
Frank---7
从JAVA转C++失败，现在继续卷JAVA的小菜鸡一枚，希望和大家共同进步！
展开
-
map遍历进行展示
{userList.map((item,index)=> <Option key={index} value={item.userId}>{item.realName||null}</Option>)||null}原创 2021-07-08 17:43:15 · 15456 阅读 · 0 评论 -
前端进行时间段筛选
传给后端参数时进行格式化weekResultTimeStart:params.insertTime!=null?moment(params.insertTime[0]).format('YYYY-MM-DD HH:mm:ss'):null, weekResultTimeEnd:params.insertTime!=null?moment(params.insertTime[1]).format('YYYY-MM-DD HH:mm:ss'):null,原创 2021-07-08 17:28:48 · 17553 阅读 · 2 评论 -
表单中去掉重置和提交按钮和搜索框
<ProForm submitter={{ // 配置按钮文本 searchConfig: { resetText: '重置', submitText: '提交', }, // 配置按钮的属性 resetButtonProps: { style: {原创 2021-07-07 17:45:32 · 19077 阅读 · 1 评论 -
当字段过长，鼠标移上去才展示全部，默认只展示部分防止表格比例发生变化
样式引入样式使用原创 2021-07-07 17:38:52 · 16557 阅读 · 0 评论 -
搜索时展示的是名字，传给后端的是id
展示普通的select框 const [typeList, setTypeList] = useState([ "增加","减少" ]); <Form.Item name="fruitType" label="类型" rules={[{ required: true }]}> <Select style={{width:500}} placeholder="请选择类型"> {typeList.m原创 2021-07-07 17:35:52 · 16823 阅读 · 0 评论 -
前端防xss攻击(去掉空格等能影响和攻击数据库的字段)
用法：把要传给后端的数据放到此能过滤的函数里面即可就能实现自动过滤的功能eg代码export function XSSFilter(str: string) { // 过滤emoji表情 str = str.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, ''); // 过滤所有html标签 str = str.replace(/<[^>]+>/gim, ''); // 过滤所有特殊字符 str原创 2021-07-07 17:10:18 · 16625 阅读 · 0 评论 -
AntDesignPro一次添加多条数据的表单字数限制,并且把input框变为可变文本框
原创 2021-07-07 17:06:40 · 3504 阅读 · 0 评论 -
React前端格式化时间
import moment from "moment"; const dateFormat = 'YYYY-MM-DD HH:mm:ss'; <DatePicker label="时间" name="insertTime" showTime onChange={onChange} onOk={onOk} defaultValue={moment(location?.defaultValues?.record?.insertTime,.原创 2021-06-27 21:12:59 · 3411 阅读 · 0 评论 -
React打包运行
项目打包运行npm run build //生成打包文件npm install -g serve //全局下载服务器包serve build //通过服务器命令运行打包项目访问: http://localhost:5000 //浏览器访问原创 2021-06-05 14:30:58 · 2570 阅读 · 0 评论 -
数组遍历VS对象遍历
数组遍历const nameArray2 = ['zhao', 'qian', 'zhang', 'sun', 'li'];nameArray2.map(() => {}); // returnconst filterResult = nameArray2.filter((value) => { return value === 'zhang';}); // return arraynameArray2.forEach(() => {}); // no return对象遍原创 2021-05-24 11:23:53 · 301 阅读 · 0 评论 -
TS常用的类型
// 也可以直接使用字面量进行类型声明let a: 10;a = 10;// 可以使用 | 来连接多个类型（联合类型）let b: "male" | "female";b = "male";b = "female";let c: boolean | string;c = true;c = 'hello';// any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测// 使用TS时，不建议使用any类型// let d: any;// 声明变量原创 2021-05-20 21:47:03 · 1479 阅读 · 0 评论 -
TS字面量进行类型声明
原创 2021-05-20 21:00:09 · 642 阅读 · 0 评论 -
React中分页错误
因为save是异步方法直接从model中取最新的数据原创 2021-05-14 21:01:03 · 43011 阅读 · 1 评论 -
React的Ant Design Pro目录结构
原创 2021-05-11 20:57:59 · 842 阅读 · 1 评论 -
react-redux模型图
原创 2021-05-10 12:41:16 · 466 阅读 · 0 评论 -
React中redux原理图
原创 2021-05-10 10:02:17 · 272 阅读 · 0 评论 -
React路由组件传递参数
向路由组件传递参数 1.params参数 路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link> 注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/> 接收参数：this.props.match.params 2.search参数 路由链接(携带参数)：<Link to='/demo/转载 2021-05-10 09:48:11 · 363 阅读 · 0 评论 -
React中antd的按需引入+自定主题
antd的按需引入+自定主题 1.安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader 2.修改package.json .... "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app原创 2021-05-10 09:47:55 · 319 阅读 · 0 评论 -
React中BrowserRouter与HashRouter的区别
BrowserRouter与HashRouter的区别 1.底层原理不一样： BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。 2.path表现形式不一样 BrowserRouter的路径中没有#,例如：localhost:3000/demo/test HashRouter的路径包含#,例如：localhost:3000/#/demo/test 3.刷新后对路由state原创 2021-05-10 09:48:39 · 343 阅读 · 0 评论 -
React中的模糊匹配与精准匹配
路由的严格匹配与模糊匹配 1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致） 2.开启严格匹配：<Route exact={true} path="/about" component={About}/> 3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由...原创 2021-05-10 09:48:18 · 673 阅读 · 0 评论 -
React中解决样式丢失问题
解决多级路径刷新页面样式丢失的问题 1.public/index.html 中 引入样式时不写 ./ 写 / （常用） 2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用） 3.使用HashRouter原创 2021-05-10 09:48:26 · 802 阅读 · 0 评论 -
React中路由组件与一般组件
四、路由组件与一般组件 1.写法不同： 一般组件：<Demo/> 路由组件：<Route path="/demo" component={Demo}/> 2.存放位置不同： 一般组件：components 路由组件：pages 3.接收到的props不同： 一般组件：写组件标签时传递了什么，就能收到什么 路由组件：接收到三个固定的属性 history: go: ƒ g原创 2021-05-09 19:59:13 · 536 阅读 · 0 评论 -
React中父子组件之间的通信
原创 2021-05-09 15:20:01 · 295 阅读 · 0 评论 -
React中判断已完成的个数
原创 2021-05-09 14:50:32 · 247 阅读 · 0 评论 -
React功能界面的组件化编码流程
功能界面的组件化编码流程（通用）1.拆分组件: 拆分界面,抽取组件2.实现静态组件: 使用组件实现静态页面效果3.实现动态组件3.1 动态显示初始化数据3.1.1 数据类型3.1.2 数据名称3.1.2 保存在哪个组件?3.2 交互(从绑定事件监听开始)...原创 2021-05-09 13:16:00 · 265 阅读 · 0 评论 -
React中的各个目录文件功能
原创 2021-05-09 11:49:53 · 512 阅读 · 1 评论 -
React中的唯一标识key(用index VS id)和key的选择
1. 虚拟DOM中key的作用： 1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下： a. 旧虚拟DOM中找到了与新虚拟DOM相同的key： (1).若虚拟DOM中内容没变, 直接使用之前的真实D.原创 2021-05-09 11:16:38 · 1376 阅读 · 0 评论 -
React向对象数组进行赋值
赋值原创 2021-05-09 11:15:57 · 2107 阅读 · 0 评论 -
React生命周期(新)
三个标红的需要前面加上UNSAFE_原创 2021-05-09 10:22:16 · 201 阅读 · 0 评论 -
React的生命周期(旧)
坑原创 2021-05-09 09:47:34 · 225 阅读 · 0 评论 -
React类里面能写的东西
1.一般方法2.赋值语句3.静态方法4.构造函数原创 2021-05-09 09:29:25 · 269 阅读 · 0 评论 -
React不提交表单并且获取表单中的数据
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1_非受控组件</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <script typ原创 2021-05-08 14:35:49 · 647 阅读 · 3 评论 -
jsx中的注释的写法
{}表示里面要写js语句js语句里面的注释为/**/原创 2021-05-08 12:11:03 · 485 阅读 · 0 评论 -
箭头函数
原创 2021-05-08 11:54:19 · 193 阅读 · 0 评论 -
React对标签属性进行限制(props)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>对props进行限制</title></head><body> <!-- 准备好一个“容器” --> <div id="test1"></div> <div id="test2"></div> &l.原创 2021-05-08 10:58:56 · 718 阅读 · 0 评论 -
js中的...运算符
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <script type="text/javascript" > let arr1 = [1,3,5,7,9] let arr2 = [2,4,6,8,10] console.lo原创 2021-05-08 10:36:16 · 662 阅读 · 0 评论 -
React中自定义方法
原创 2021-05-08 10:09:20 · 670 阅读 · 0 评论 -
React中构造函数、reader和函数的调用次数和时机测试
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>state</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <script type=原创 2021-05-07 21:47:28 · 532 阅读 · 0 评论 -
解决React中this绑定的问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript"> function demo() { console.log(this) } demo(原创 2021-05-07 21:28:10 · 213 阅读 · 0 评论 -
React中的this指向问题
原创 2021-05-07 21:15:46 · 216 阅读 · 0 评论