随笔分类 - react
摘要：一款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
阅读全文
摘要：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 中
阅读全文
摘要：1、axios({ method:'get', url:'http://bit.ly/2mTM3nY1233455, headers: { 'content-type': 'text/xml' },data: {} }) .then(function(response) { });2、 axios(
阅读全文
摘要：先说一下我的问题： 最近在用 v3 和 ts 做工程，但是在用户代码片段中设置了快捷键，发现是不起作用的，就很奇怪，过了一段时间， 突然想起来，我现在用的是 ts，不是js了，哈哈，虽然在用但是还没反应过来，后来改了就好了，总结如下： 1、常规（vue + js + ...） 找到文件-首选项-用户
阅读全文
摘要：const listenDomClick = (e) => { console.log(e); } useEffect(() => { document.addEventListener('click', listenDomClick) return () => { document.removeE
阅读全文
摘要：影响了两天的问题，终于解决了，各种js计算高度，平移，结合c3，最后发现js计算后，是c3层级问题，希望能帮到园友，说明如下： 问题： 当一个或多个元素同时使用 如 transform: translateY(-100px);时， transform会默认 修改 元素的层级关系， 即，会出图一这种，
阅读全文
摘要：长话短说： 1、官网 https://react.docschina.org/docs/context.html 2、优点 Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。 3、问题 Context 主要应用场景在于很多不同层级的组件需要访问同样一些的
阅读全文
摘要：// useReducer 实现 todoList import React,{ useReducer,useRef } from 'react' import './index.less' function todoList() { const inputRef = useRef(); /* ht
阅读全文
浙公网安备 33010602011771号