rock_23的博客

PS：也不只在react中用，其他框架也可，生态圈不一样配置会不同，但是能提供整体的思路，可以参考。注：我之所以能直接使用@去默认引入src下的所有文件，是因为我在typescript中配置path。在批量引入之前，我们需要安装一个包并配置到typescri.json文件中。在src文件下新建一个icon文件，然后新建一个.tsx文件。注：这块代码可直接copy走。批量引入处理并导出封装组件。

antd清空form表单中的内容当我去使用antd中form表单中的清空数据时的东西，我发现他们那个不太适合react中jsx组件使用（如ref的使用方式、const [form] = Form.useForm();这种的也不适合）。而且我出现了各种报错，我发现问题所在点就是我们一定要使用getFieldDecorator 可以解决这些问题。当然，使用getFieldDecorator就相当...

这是我封装的antd select支持输入和选择功能代码，直接拿过去就可以用了

antd4.0模态框获取form表单的提交数据内容要想那到值，其实和antd4版本以前拿数据是差不多的。因为antd3以前拿数据(有段时间不用3版本了，只记得大概，简要写一下，不一定就没错)：const { getFieldDecorator } = this.props.form;onOkHandler = () => {// 3版本拿antd中表单的数据 this.props.form.validateFields((err, values) => { if(!er

使用Form.List是因为我的项目中涉及到一个两个单选按钮，当点击来自定义单选按钮就显示input框的问题，我当时最初没有选择用Form.List遇到了各种各样的坑，造成了很大时间上的浪费，初次用Form.List虽然会有点抵抗，但是却解决我的代码洁癖，写完感觉我的代码是非常整洁的。使用：注：一下是省略写法，主要是用来总结Form.List的使用，具体操作还是要看项目的需求const users = [ { name:'min', label: '小刚', }, { name:

React+antd中form的创建和编辑使用同一组件的回显问题笔记中的需求讲解：创建和编辑都是antd中的modal弹框，弹框的内容那是form表单，所以创建不用说，重点则是编辑时的回显。创建和编辑就传个不同值来区别什么时候是创建，什么时候是编辑就好了，笔记不细说了。React:使用父传子的形式：直接可以在componentWillMount这个生命周期中就能拿到数据，然后是用antd——form的一个属性：setFieldsValue设置name就????了。componentWillMou

代码：const [columns,setColums] = useState([// 主要代码title: <div style={{“position”: “relative”}}><div style={{ “text-align”: “right” }}>参数<div style={{ “text-align”: “left” }}>变量<div style={{“content”: “”,“position”: “absolu

使用方法：在组件内定义formconst [form] = Form.useForm();const clearHandler = () => { console.log('点击form表单'); // props.form.resetFields(); props.formStatus.resetFields(); console.log(props); }; return <> &lt

给leaflet地图局部做拖拽限制

后端提示： ERROR Failed to compile with 1 errors 12:29:51 PM error in ./node_modules/swagger-ui-react/swagger-ui.jsModule not found: Error: Can't resolve 'btoa' in '/home/ubuntu/adp/myapp/node_modul

注意：我这里是当下不超过600个标记点，所以我这里是一次性渲染出来进行优化的，如果数据大于2000条甚至更大的时候，需要用其他的优化方法，而不是这样一次性全部渲染出来这些所有标记点的数据。需求： 在首页的地图内，增加一个一个的marker来进行展示echarts，效果如下图，地图用的是leaflet，图表用的是echarts在开发中，我遇到两个比较大的问题第一个：图表一直加载的问题，因为当我点击不同的图表时会显示不同的图表详情，那我地图上的所有图表都再次进行循环渲染，然后实现页面完整的展示，可

useLayoutEffect 和 useEffect 是一样的，只是两个 hook 执行的时机不同。上面说了 useLayoutEffect 是在 DOM 变更之后同步调用 effect（就是传入到useLayoutEffect中的函数）,所以 useLayoutEffect 会比 useEffect 执行得早一些。注意：1、会在react渲染完之前执行 所以会比useEffect钩子执行会晚（此时dom也已经被渲染出来了）2、会阻塞渲染，除非要操作dom 否则不推荐使用这个钩子DOM 变更之后

useCallback的使用方式在这里就不重复描述了，（注：可以看这篇文章：https://blog.youkuaiyun.com/rock_23/article/details/121410694）useMemo的使用import { useState, useMemo } from 'react'import { Button } from 'antd'const Home: React.FC = () => { const [ count, setCount ] = useState&lt.

useCallback是用来帮忙缓存函数的，当依赖项没有发生变化时，返回缓存的指针，而props涉及到复杂对象类型都是通过指针来传递到。多用于回调函数，在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染的子组件是非常有用的。代码示例：父组件:import { useEffect, useState, useCallback } from 'react'import { Space, Table, Tag, Button } from 'antd'impor

useReducer：第一个参数reducer和redux的reducer是一样的。第二个参数的initialArg是初始值的意思。第三个参数int是重置的意思自我理解：我感觉这个钩子是和context差不多的效果，但是它比context传递的组件更深。也是为了解决我们在组件中一层一层去传参办法。使用示例：const initialState = {count: 0};function reducer(state, action) { switch (action.type) {.

这个钩子让我想起来了vue中的有一个自定义指令的钩子方法，有点类似，只是不同的是，react中是在单个组件内，在一些使用场景上会受限，但是也刚好满足所需，而在vue中它既有全局的，也有内部的。使用示例：父组件：import ImperativeHandle from "./component/ImperativeHandle"import React from 'react'import { Button } from 'antd'const Home: React.FC = (props,.

useDebugValue的定义：useDebugValue用于自定义hook标签组件内的。自定义hook的定义：本质上就是一种函数代码逻辑的抽取，它本身并不算react的特性。自定义hook是一个函数，其名称以“use”开头，函数内部可以调用其他的hook。（实际上就是相当于一个函数，只是叫法不同，意义的理解也就有所不同）知识延伸：自定义hook和高阶组件的区别：自定义hook相当于把公共方法共享，而高阶相当于传入一个组件当作参数传入，再返回一个新的组件。自定义Hook示例：import

各位博友，这篇是针对自己的项目中的产品需求所做的总结，你们可以根据自己项目进行其他的资料查询，只能说有些部分的用法是差不多的，可根据这篇博客来寻找一些leaflet的使用使用灵感。需求说明：安装：npm install react react-dom leafletnpm install react-leafletnpm install @supermap/iclient-leafletnpm install leaflet-heatmapnpm install proj4npm insta

这个有两处要修改：第一处：项目文件中的config/defaultSettings.ts文件删除logo第二处：项目文件中的src/app.tsx注：因项目的不同所以文件的后缀会有些不同。

安装：npm install --save @antv/g6;效果图展示：这些代码可以直接拿过去用，这是封装的一个公共组件。import React, { useEffect, useState } from 'react';// 引入G6import G6 from '@antv/g6';// 引入antv的样式import insertCss from 'insert-css';const GsixManage = (props) => { const listObj

window.setInterval(()=>{setTimeout(fun,0)},3000)注：setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死你的网页。但是setTimeout是自带清除定时器的。自我理解：我们是在使用setInterval的时候，一般我们会加一个清除定时器：定时器清除的方法：clearTimeout(obj)和clear...

今天遇见一个坑，是因为我的项目中用到了antd分页，我把拿到的数据都给算好了放入了total里面，然后分页就出现了最开始的页数是对的，然后点击到最后一页就出现了问题，原来分页的总页数total加上defaultPageSize然后antd中分页会自动算好总页数。页面会自动渲染出来。那么defaultPageSize是什么那？它是一页显示多少条的数据。...