随笔分类 - typeScript
摘要：一款redux替代品的状态管理 实现： react状态管理 ts支持 数据持久化储存 store模块封装 三种引入使用的方法 清除全部或指定store内容 1、install npm install zustand # or yarn add zustand// 清除全部或指定store内容 时使用
阅读全文
摘要：// @ts-nocheck import React from 'react' class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { error: null,
阅读全文
摘要：官方： React.startTransition 不提供 isPending 的标志。要跟踪过渡的待定状态，请参阅 React.useTransition。 由于React.startTransition 不支持 跟踪pending状态，则示例使用hooks - useTransition 示例判
阅读全文
摘要：形如 const PRODUCTS = [ {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'}, {category: 'Sporting Goods', price: '$9.99', sto
阅读全文
摘要：React 事件 1、React 事件的命名采用小驼峰式（camelCase），而不是纯小写。 2、使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。 3、在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefa
阅读全文
摘要：1、官方参考 https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md 2、效果 安装 <= raact16 npm install react-virtualized --save >= react17 npm in
阅读全文
摘要：1、安装 $ npm install http-proxy-middleware --save$ # or$ yarn add http-proxy-middleware 2、创建 src/setupProxy.js （src目录下创建文件夹） const { createProxyMiddlewa
阅读全文
摘要："react": "^18.2.0", "antd": "^5.1.1", 先看效果（不选和多选） // 假设后端返回数据结构 const data = { fruit: [ { label: 'Apple', value: 'apple' }, { label: 'Pear', value: 'p
阅读全文
摘要：因react-router中路由配置时，子路由为父级路由+子路由拼接而成，故当实现面包屑时需要根据当前路由获取完整的父子路由链 入参：如 /layout/list/showList 出参：如 ['/layout', '/layout/list', '/layout/list/showList'] i
阅读全文
摘要：// antd： 5.1.1 import React from "react"; // 1、自定义图片 // import Icon from '@ant-design/icons'; // import Logo from '@/assets/Logo.png' // import './ind
阅读全文
摘要：版本： react: 18.2.0 antd：5.1.1 AnchorPage,tsx import React, { useEffect, useState } from 'react'; import { Anchor, Row, Col } from 'antd'; const AnchorP
阅读全文
摘要：参考特别感谢： https://blog.csdn.net/glorydx/article/details/112625953
阅读全文
摘要：1、父组件 Demo3Count组件缓存有两种方法 a、 b、 2、子组件 3、效果 3.1、初始 均渲染 3.2、点击 button 3.3、input输入框
阅读全文
摘要：1、useRef （是hooks一种，一般在函数组件使用） 1.1、获取当前dom数据（不推荐，推荐使用受控组件-即使用useState绑定表单元素） 点击look， 获取input的数据内容 1.2、作为存储使用 注： 1、初始化值为 80，但是新增后，逻辑是81，但是页面还是80 2、由useR
阅读全文
摘要：a、组件关系：依次嵌套 Demo2 -> Demo2ComA -> Demo2CompAA 。。。 b、实现 可实现 Demo2ComA 与 Demo2CompAA 两组件间数据获取与修改 （多层次嵌套时，也可实现，此处仅展示2层嵌套） c、未实现，在测试过程中，发现以下问题 父组件 Demo2 中
阅读全文
摘要：<!-- 动态组件 --> <component :is="components.get(activeKey)" /> import { defineAsyncComponent, markRaw } from 'vue'; const components = markRaw(new Map<st
阅读全文
摘要：1、axios({ method:'get', url:'http://bit.ly/2mTM3nY1233455, headers: { 'content-type': 'text/xml' },data: {} }) .then(function(response) { });2、 axios(
阅读全文
摘要：1、 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router" function getRoutes() { const { routes } = loadRouters(); /** * rout
阅读全文
摘要：const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} } editorConfig.MENU_CONF['uploadImage'] = { async customUpload(file, insertFn) { const {
阅读全文
摘要：官网 https://www.wangeditor.com/v5/for-frame.html#vue3 1、查看所有工具栏 const handleCreated = (editor) => { editorRef.value = editor // 记录 editor 实例，重要！ // 查看所
阅读全文
浙公网安备 33010602011771号