![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
M_allstar
所以我每个都选C
展开
-
组件外部点击事件
// 组件外部点击事件function useOnClickOutside(ref, handler) { useEffect(() => { const listener = (event) => { if (!ref.current || ref.current.contains(event.target)) { return } handler(event) } document.addEventLis.原创 2022-02-17 17:04:32 · 610 阅读 · 0 评论 -
渐变色field组件
export const GradientColorField = observer(({label, value, defaultValue, gradientColor, gradientColorType = 'linear', onChange = () => {}, className, readOnly}) => {const [rect, setRect] = useState({})const [circle, setCircle] = useState({})con原创 2020-12-24 10:27:39 · 234 阅读 · 0 评论 -
浏览器tab切换最小化,当前页面无操作刷新页面
/* eslint-disable react-hooks/exhaustive-deps */import React, {useState, useEffect} from 'react'// 可见状态下的延迟const visibleDelay = 3000// 不可见状态下的延迟const invisibleDelay = 1000// 触发刷新定时器执行次数const timerTimes = 2const App = () => { // 是否触发事件 cons原创 2020-07-31 18:20:20 · 359 阅读 · 0 评论 -
Promise实现图片预加载
const [isLoadSuccess, setIsLoadSuccess] = useState(true)// 图片预加载, 传入地址参数const loadImage = imageSrc => {// resolve 标志成功时执行的语句// reject 标志失败时执行的语句return new Promise((resolve, reject) => {const image = new Image()image.src = imageSrc// 如原创 2020-06-28 23:27:07 · 977 阅读 · 0 评论 -
JSX规范
JSX规范遍历数组成员,使用Children.toArray()方法,不使用key="id"正确{options.map(option => Children.toArray(<div ...</div>))}错误{stories.map((story, index) => (<div key={story.id}> ...</div>))} ...原创 2020-06-19 12:51:19 · 245 阅读 · 0 评论 -
React Hook 实现水印效果
import React, {useEffect, useState} from 'react'import {observer} from 'mobx-react-lite'const WaterMark = ({text = '', option}) => { const { top = '0px', left = '0px', width, height, } = option const [background, setBackground...原创 2020-05-09 18:16:26 · 515 阅读 · 0 评论