- 博客(14)
- 收藏
- 关注
RSS订阅转载 控制非 React 小部件
例如，如果你有一个没有使用 React 编写的第三方地图小部件或视频播放器组件，你可以使用 Effect 调用该组件上的方法，使其状态与 React 组件的当前状态相匹配。在本例中，不需要 cleanup 函数，因为 MapWidget 类只管理传递给它的 DOM 节点。从树中删除 Map React 组件后，DOM 节点和 MapWidget 类实例都将被浏览器的 JavaScript 引擎的垃圾回收机制自动处理掉。有时，你希望外部系统与你组件的某些 props 或 state 保持同步。
2023-06-28 17:23:08
69
原创 scroll-behavior: smooth； 在Chrome中无法正常工作
【代码】scroll-behavior: smooth；在Chrome中无法正常工作。
2023-04-06 18:00:00
446
1
原创 node fs 读取指定文件夹下特一格式文件后，写入另一文件
获取指定文件夹下的特一格式的文件名数组import { reacddirSync } from 'fs'const directory = './dataSource'/** 获取 dataSource文件夹下所有.json格式的文件名称 */function getNameListFromFolder(directory){ let fileList = [] const files = readdirSync(directory) files.forEach((item)=>.
2022-02-16 11:33:36
678
原创 React useEffect里使用state，不依赖state
useEffect里使用到currentState，如果 [ ] 不填写currentState的话，会报黄色警告这里的defaultState是一个对象，里面包含new Date()实时更新的值const [ currentState, setCurrentState ] = useState(defaultState)useEffect(() => { // prevState为上一次的状态(previous) setCurrentState(prevState) => {
2022-01-06 17:13:41
743
原创 React 单文件导出多个组件，引用方式为Parent.Child
使用方式类似于 Ant Design 的Tabs组件Tabs文件夹下的tabs.jsxconst Tabs = ({ children }) => { return ( <> <h6>Title</h6> <div>{children}</div> </> )}const TabPane = ({ children }) => { return ( <div>
2022-01-06 16:57:53
1405
原创 React createPortal() 使用场景
ReactDOM.createPortal(child, container)Portal 将提供一种将子节点渲染到 DOM 节点中的方式，该节点存在于 DOM 组件的层次结构之外。因此 Portals 适合脱离文档流(out of flow) 的组件，特别是 position: absolute 与 position: fixed的组件。比如模态框，通知，警告，goTop 等<html> <body> <div id="root"></di
2021-12-14 17:44:08
6963
原创 React项目 VSCode自动在constructor后添加空格 解决方法
React项目 VSCode自动在constructor后添加空格 解决方法代开Settings搜索space在Extensions下找到TypeScript将Insert Space After Constructor的勾选取消------------------------------------ 完成 --------------------------------------...
2021-11-25 09:39:46
417
原创 React 函数式组件 父子传值
parent.jsimport React,{ useRef } from 'react'import Child from './child'function Parent(){const childRef = useRef()const props = { list : ['1', '2', '3'], getChildData: (data) => { const nowList=['4', '5', '6'] // 父组件调用子组件的方法 childR
2021-08-23 12:00:06
1657
原创 vue 上传图片 本地预览
html<div class="upload-wrapper"> <input type="file" class="upload-img" @change="getImgUrl" accept="image/png,image/jpeg,image/jpg" /> <div class="upload-btn"> <q-icon name="fa fa-plus" class="plus-icon" v-show="!img
2021-01-21 13:19:38
688
原创 javaScript 贝塞尔曲线实现加号掉落进购物车
我做了2个加号，一个用来添加点击事件，另一个使用position:absolute 重叠在它上面，用来做掉落的动画实现效果：css部分 .right-li{ float: right; width: 28%; height: 100%; line-height: 60px; text-align: right; overflow: hidde...
2020-04-17 12:33:17
451
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人