react
Hello react
Jedi Hongbin
hongbin.xyz meta.hongbin.xyz kmyc.hongbin.xyz
展开
-
webgl着色器学习 - 渐变颜色(varying 在顶点着色器和片元着色器之间传递信息)
【代码】webgl着色器学习 - 渐变颜色(varying 在顶点着色器和片元着色器之间传递信息)原创 2022-09-29 23:30:00 · 298 阅读 · 0 评论 -
react全局消息弹出框组件
任何位置调用方法 弹出消息条 可传入组件或字符串 和显示时长。原创 2022-09-16 21:03:25 · 1097 阅读 · 0 评论 -
eslint 覆盖插件的某项规则
Invalid property 'fill' found on tag 'path', but it is only allowed on: svgeslintreact/no-unknown-property`react/no-unknown-property` 检测svg 的fill属性 但那时我需要的 使用 规则设置检查模式原创 2022-09-05 17:44:01 · 435 阅读 · 0 评论 -
web worker使用第三方库
在js多线程web worker中使用第三方库。原创 2022-08-22 19:31:49 · 275 阅读 · 0 评论 -
box-shadow阴影选择器-react
1.0代码 同步代码仓库 : https://gitee.com/honbingitee/ruyi-lowcode. src/component/BoxShadow/index.tsx/* * @Author: hongbin * @Date: 2022-05-02 21:20:18 * @LastEditors: hongbin * @LastEditTime: 2022-05-04 08:28:09 * @Description:box-shadow pick */import .原创 2022-05-04 09:10:23 · 380 阅读 · 0 评论 -
react 可拖拽进度条
效果/* * @Author: hongbin * @Date: 2022-04-16 13:26:39 * @LastEditors: hongbin * @LastEditTime: 2022-04-16 21:00:02 * @Description:拖动进度条组件 */import { FC, ReactElement, useRef } from "react";import styled from "styled-components";import { flexCent原创 2022-04-17 10:29:39 · 1228 阅读 · 2 评论 -
react 优雅处理多条件鼠标拖拽位移
场景三种拖拽条件 可纵轴 横轴 和全部方向 如果加3个监听重复代码太多因为状态更改组件会重新渲染 所以写的时候要多注意避免有大量代码的函数多次创建销毁stateconst [position, setPosition] = useState(axisPosition);jsx<Container style={{ top: position.top + "px", left: position.left + "px", }} .原创 2022-04-03 21:57:29 · 1803 阅读 · 0 评论 -
react多级右键菜单
文章目录功能演示逻辑代码业务代码功能覆盖右键菜单模拟原生浏览器右键菜单默认出现在右侧右侧显示不全则出现在左侧一级菜单能完整显示二级菜单不能二级小说出现在另一侧 默认出现在右侧…演示逻辑代码监听右键菜单 一级菜单检测document.addEventListener("contextmenu", (e: any) => { e.preventDefault(); let x = e.pageX + 2; let y = e.pageY;原创 2022-03-24 22:31:13 · 742 阅读 · 0 评论 -
react内存泄漏案例
????记录一下烦人的内存泄漏案例????我有两个组件A和BA负责先加载一部分数据B负责渲染数据同时加载剩余小部分数据A加载完数据后显示B组件A组件不需要再渲染例如:{loading ? (<A />) : <B/>}但是我在A中使用了一个加载器并挂载到window上,这样B中也能用这个加载器,但是在加载器的加载进度事件回调中调用了A组件中的其他变量和方法对A组件产生了变更:loader.onProgress = async (et) => { setPr原创 2022-02-07 10:47:57 · 661 阅读 · 0 评论 -
react 路由监听
import { useLocation } from "react-router";const location = useLocation();useEffect(() => { console.log("location:", location);}, [location]);原创 2022-01-04 20:16:04 · 1844 阅读 · 0 评论 -
react-router-dom升级v6
文章目录前言Switch -> RoutersRouter component -> element重定向Router 可以直接嵌套 Router路由路径规则简化useHistory成为History重命名 \ to \useMatch -> useRouteMatch前言创建新项目后发现Switch怎么没有智能推荐了,对比了一下版本号,居然升级了????????幸好在21年的倒数第二天发现要不就是发布了一年才知道,太落伍了让我来看看有哪些变化github迁移指南v5 -&g原创 2021-12-30 20:28:19 · 1385 阅读 · 0 评论 -
Taro项目eslint配置jsx使用双引号
.eslintrc.jsmodule.exports = { extends: ['taro/react'], rules: { 'react/jsx-uses-react': 'off', 'react/react-in-jsx-scope': 'off', "quotes": ["error", "double"], "jsx-quotes": [ "error", "prefer-double", ] },};.pr原创 2021-12-18 10:39:30 · 1273 阅读 · 0 评论 -
Taro markdown 解析器
文章目录效果环境思路代码 - 未完待续git 仓库没有找到合适的库 期待Taro的发展没有经过测试 只提供一个思路项目代码在下方的git仓库效果环境"dependencies": { "@babel/runtime": "^7.7.7", "@tarojs/cli": "3.3.16", "@tarojs/components": "3.3.16", "@tarojs/react": "3.3.16", "@tarojs/runtime":原创 2021-12-17 22:42:15 · 1116 阅读 · 0 评论 -
React canvas 抽奖转盘
文章目录地址实现代码仓库代码片段添加选项canvas绘制转盘地址实现思路颜色对应选项 从选项列表中随机选中一个 根据索引生成相应的选装角度 在完成动画后弹出蒙版显示结果代码仓库代码片段添加选项const addOption = () => { const input = inputRef.current; if (input) { const content = input.value; if (content) { //原创 2021-12-03 17:29:43 · 1032 阅读 · 0 评论 -
在线数据库管理工具 web-db mongodb
文章目录写在前面体验地址功能展示登陆页面双击查看数据删除document更新document更新已有属性---需指定类型删除字段 支持恢复增加新字段写在前面起因: 平常连接数据库只是查看数据,没有复杂操作时还要打开软件,还要放在后台一直开着,感觉不舒服就想着开发一个web端的数据库管理工具试试尝试: 与数据库对接使用node和mongodb官方插件node-mongodb-native经过一顿操作后发现功能实在有限制,并且本人目前功力尚浅,对于一些复杂操作实现起来十分棘手,遂放弃打造一个常规的工具原创 2021-11-21 17:35:26 · 2293 阅读 · 0 评论 -
[typescript]为包扩展typescript类型 d.ts注册全局变量
看文档可以解决百分之80的问题 但他没告诉我d.ts定义在哪????为styled-components的自定义主题定义类型需要拓展styled-components的 DefaultTheme 接口styled-components文档我的环境 create-react-app在tsconfig.json中有一个 include字段我的include值为一个数组 里面有一个src目录 所以把d.ts文件放在src目录下就生效了src/d.tsimport "styled-compon原创 2021-11-09 17:46:06 · 1744 阅读 · 0 评论 -
react全局提示通知
使用mui的Snackbar思路 暴露一个 ref 需要通知的时候调用 组件暴露的方法import { ReactElement, useState, createRef, useImperativeHandle, useCallback, useRef, useEffect,} from "react";import { Alert, AlertColor, Snackbar, SnackbarOrigin } from "@mui/material";interf原创 2021-11-09 13:12:37 · 1042 阅读 · 0 评论 -
MUI配合styled-components主题支持
文章目录编辑MUI样式自定义主题styled-component使用MUI主题开发组件编辑MUI样式MUI 和 syuled-component 都有自己的主题机制 要他们配合使用需要看上一篇 styled-components作为 MUI的样式引擎实现 让 MUI采用styled-component 式自定义样式组件完成后查看 styled-component 的propsimport { Button, styled } from "@mui/material";const MyBtn原创 2021-11-09 12:32:55 · 891 阅读 · 0 评论 -
在create-react-app中MUI(material-ui)使用styled-component 作为样式引擎
MUI 的新名字 mui 不再是 material-ui 相关的包名也随之更改https://mui.com/zh/getting-started/installation/#npmhttps://mui.com/zh/guides/styled-engine/官方案例-js官方案例-ts需要配置 webpackcreate-react-app中需要customize-cra覆盖默认webpack配置yarn add customize-cra react-app-rewired -D .原创 2021-11-08 16:02:06 · 1137 阅读 · 0 评论 -
精美卡片拖拽仿3D效果
3D效果 https://micku7zu.github.io/vanilla-tilt.js/index.htmlimport { FC, ReactElement, useEffect } from "react";import styled, { keyframes } from "styled-components";import { randomColor } from "../BUI/DateTimePicker/utils";import "../../constant/Vanill.原创 2021-11-03 18:12:34 · 306 阅读 · 0 评论 -
react源码学习-02 Fiber memo
React Fiber是对核心算法的一次重新实现把一个耗时长的任务分成很多小片react 协调diff算法memoy原理function memoize(fn) { var cachedArg; var cachedResult; return function(arg) { if (cachedArg === arg) { return cachedResult; } cachedArg = arg; cachedResult = fn(arg);原创 2021-10-26 13:27:35 · 170 阅读 · 0 评论 -
react源码学习-01
文章目录JSX编译方式的改变 不再需要引入ReactComponentthis.setStatePrevComponent节点类型Fiberdiff替换原则版本:react 17JSX编译方式的改变 不再需要引入Reactreact 17以前每个组件头部都需要引入 react import React from "react";17以后不再需要引入React因为jsx编译方式发生了改变以前使用 babel-loader转换成 React.createElement(...)现在由react/原创 2021-10-25 21:02:33 · 224 阅读 · 0 评论 -
react 两侧小图 轮播图
git地址import { FC, ReactElement, useEffect, useState } from "react";import styled, { css } from "styled-components";import { flexCenter } from "../components/BUI/styled";import { ThemePrimaryBgc } from "../components/BUI/View/ThemeView";interface IP..原创 2021-10-21 19:16:09 · 724 阅读 · 0 评论 -
react typescript封装函数式组件styled-component
interface IButton { margin?: boolean; width?: string; justify?: JustifyContentProps;}const Button = styled.button<IButton>` .....`;interface ILoadButton extends IButton, DOMAttributes<HTMLButtonElement> { loading?: boolean;}.原创 2021-10-18 07:15:40 · 433 阅读 · 0 评论 -
react useState验证码发送倒计时
1const mailREG = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;const [countDown, setCountDown] = useState(0);useEffect(() => { if (countDown) { setTimeout(() => { setCountDown(count => count - 1); }, 1000); }},原创 2021-10-12 19:34:45 · 849 阅读 · 0 评论 -
Next.js使用 RAS加密jsencrypt
yarn add jsencrypt因为next.js在加载时是没有window对象的 这个库引用了window对象导致报错 无奈出此下策export const pub = `-----BEGIN PUBLIC KEY-----xxxxxxxxxxxxxxxxxxxxxxxxxx-----END PUBLIC KEY-----`;const RASEncrypt = () => { if (window.jsencrypt) { return window.jsenc原创 2021-09-24 06:56:51 · 866 阅读 · 2 评论 -
react useAuth高阶函数范型定义
常见的需求 实现在点击一个按钮时判断用户是否登陆 如果没登陆跳转登陆页面 登录了则正常执行函数处理tsx<Button onClick={sendMessage}>发送</Button>const { verifyAuth } = useAuth();const sendMessage = verifyAuth(() => { console.log(text.current);});useAuthinterface IContext { veri.原创 2021-09-17 15:23:46 · 898 阅读 · 0 评论 -
Next.js ReferenceError: localStorage is not defined
axios.interceptors.request.use((config: AxiosRequestConfig) => { if (typeof window !== "undefined") { config.headers.Authorization = getLocalJWT(); } return config;});原创 2021-08-28 17:52:58 · 1792 阅读 · 0 评论 -
Next.js & create-react-app使用react-markdown
文章目录结论NEXT代码高亮需要手动复制js文件CRA封装代码在next和CRA中使用方式不同 主要是因为 next用require() 而新版本的react-markdownhttps://github.com/remarkjs/react-markdown结论不用这个 换个好的NEXT解决:降级降级到如下"react-markdown": "^6.0.3","react-syntax-highlighter": "^10.3.3","rehype-raw": "^5.1.0","原创 2021-08-25 13:44:45 · 628 阅读 · 0 评论 -
ts封装范型请求 typeof,Parameters,ReturnType 使用
使用export interface AuthProps { username: string; password: string;}export const login = request<AuthProps>("/login");request方法是需要传入一个参数的类型的范型 如request<AuthProps>("/login")export interface AuthInfo { _id: string; username: string;原创 2021-08-22 08:12:57 · 4002 阅读 · 0 评论 -
react-markdow常用配置
import { ReactElement, useRef, useMemo, forwardRef, useEffect, useImperativeHandle, useCallback,} from "react";import styled from "styled-components";import ReactMarkdown from "react-markdown";import { Prism as SyntaxHighlighter } from "r原创 2021-08-19 11:03:20 · 263 阅读 · 0 评论 -
react实现markdown编辑器
文章目录思路效果加粗/斜体等粘贴图片上传拖拽图片上传添加列表/代办/表格添加 代码片段同步滚动 + toc目录功能如下上传图片 包括 点击上传 拖拽上传 粘贴图片上传点击nav button添加语法块 自动在编辑器设置插入点支持选中文字 点击按钮加入加粗/斜体等样式@[toc]添加目录TODO 快捷键监听思路使用 Selection 和 Range API 实现获取鼠标选中区域内容以及改变选中区域元素 实现大部分文字操作功能如 加粗 就是在选中的区域两侧加入 ** **代码示例原创 2021-08-19 10:58:35 · 1498 阅读 · 0 评论 -
js 监听 复制图片 & 拖拽上传文件 并填充到markdown编辑器
文章目录效果获取粘贴的文件获取拖拽的文件发送请求 生成markdown 语句实现逻辑代码(主要实现)后端代码效果获取粘贴的文件const { clipboardData } = e;file = clipboardData.items[0].getAsFile();const Paste = useCallback( e => { uploadFileBy("paste")(e); }, [uploadFileBy]);<div onPaste={Past原创 2021-08-13 07:53:59 · 841 阅读 · 0 评论 -
js 选中文字修改:裁剪,加粗... 获得选中内容
使用以下两个apiMDN Selection APIMDN Range API需要 APIconst Range = useCallback(() => { const selObj = window.getSelection(); if (!selObj) return; return selObj.getRangeAt(0); }, []);删除代码const range = Range();if (!range) return;range.d..原创 2021-08-10 21:04:24 · 1253 阅读 · 0 评论 -
create-react-app & antd
React中使用create-react-app以及antd页面基本搭建React设置antd3x自定义主题,TypeError: this.getOptions is not a function的解决方法react-app-rewiredantd-在 create-react-app 中使用yarn create react-app xxxx --template typescriptyarn add antd babel-plugin-import customize-cra less l原创 2021-07-22 10:19:33 · 208 阅读 · 0 评论 -
css & svg 实现 波浪 覆盖文字效果
需要 svg<svg class="wave-svg" xmlns="http://www.w3.org/2000/svg" id="738255fe-a9fa-4a5e-963a-8e97f59370ad" data-name="3-waves" viewBox="0 0 600 215.43"> <path class="871c1787-a7ef-4a54-ad03-3cd50e05767a" d="M639,986.07c-17-1-27.33-.33-40.5.原创 2021-07-19 09:13:58 · 368 阅读 · 0 评论 -
Next.js 中设置svg为背景图片
只需要将图片放到 public目录下 然后以此路径为起点设置路径就可以了const Container = styled.div` background: url("wave.svg");`;原创 2021-07-19 08:15:12 · 903 阅读 · 0 评论 -
派蒙 点击回顶部
import { FC, ReactElement, useCallback, useEffect, useState } from "react";import Image from "next/image";import Paimon from "../../assets/paimon_small.png";import styled from "styled-components";interface IProps {}const ScrollToTop: FC<IProps&g.原创 2021-07-15 19:08:13 · 154 阅读 · 0 评论 -
在next.js中使用styled-component以及全局主题切换
_app.js只加入一个 ThemeProvide 具体在 ThemeProvide 中import type { AppProps } from "next/app";import ThemeProvide from "../context/ThemeProvide";function MyApp({ Component, pageProps }: AppProps) { return ( <ThemeProvide> <Component {...pa原创 2021-07-14 20:44:20 · 1543 阅读 · 2 评论 -
styled-components给svg添加动画
https://stackoverflow.com/questions/68043891/inherited-svg-functional-component-cannot-add-style-styled-components如下 直接继承react组件 然后添加样式居然无效import styled, { keyframes } from "styled-components";const LoadIconComponent = ({ color }: { color?: string }) =原创 2021-06-19 13:57:10 · 330 阅读 · 0 评论