weixin_41387874的博客

当有popup的时候，禁止页面滚动方案问题背景有时候我们需要做一个弹窗，当弹窗出现的时候，我们有可能想要禁止整个页面滚动。解决方案使用css我们知道页面的滚动是由于页面内容超出viewport，且overflow属性被设置为auto或scroll。useEffect(() => { const handle = () => { if(isLockScroll) { document.body,style.overflow = 'h

给fetch方法添加timeout的方法问题背景在某些时候我们需要对基于fetch的AJAX方法添加timeout，但是不同于XMLHttpRequest，fecth不支持设置timeout。解决方法Promise.race([…])Promise.race()接受以数组形式传入的多个Promise对象，等待第一个resolved或rejected的Promise对象作为自己的状态。使用Promise.race([…])为fetch添加一个定时resolved的Prom

给fetch方法添加timeout的方法问题背景在某些时候我们需要对基于fetch的AJAX方法添加timeout，但是不同于XMLHttpRequest，fecth不支持设置timeout。解决方法Promise.race([…])Promise.race()接受以数组形式传入的多个Promise对象，等待第一个resolved或rejected的Promise对象作为自己的状态。使用Promise.race([…])为fetch添加一个定时resolved的Prom

React中点击滚动功能实现问题背景当我们在React中需要实现点击某处实现滚动到页面上某位置A的功能。解决方法使用ref + getBoundingClientRect() + scrollTo使用ref获取A位置处的DOM元素实例。使用getBoundingClientRect()获取滚动到这个DOM实例的距离。（rect.bottom是DOM实例A距离viewport左上角的Y轴上的距离）。使用scrollTo({top: dis, behavior: “smooth

React组件定义多个className的方法问题背景有时需要对一个jsx中的元素定义多个类名，但是因为jsx不允许重复的属性，所以不能直接使用多个className。解决方法使用字符串拼接import styles from './index.module.scss';interface PropsType{ className: string;}const app: React.FC<PropsType> = () => { return (

引用自定义字体样式目录结构将字体文件放在 src/assets/fonts 文件夹中。定义一个fonts.scss文件在src/style文件夹中。这个fonts.scss文件用于使用字体文件定义自定义字体。利用字体文件定义自定义字体的方法使用@font-face@font-face{ font-family: 'XXX'; src: url('...');}上面的就是文件fonts.scss中的内容。font-family，用于定义自定义字体的名称

React中修改arco-design组件内部样式（类似于Vue深度选择器）React样式隔离React样式隔离的方式是CSS Module。React中类似于Vue中深度选择器的方法Vue中的深度选择器可以在父组件的css中修改子组件中元素的样式。一般常用的是用于修改类似于arco-design的组件库中组件的内部元素的样式。React中类似的方法.a{ :global{ .b{ ... } }}上面是父组件的样式文件。.b是子

React函数式组件使用refrefref的作用ref用于获取DOM元素或子组件实例。useRefuseRef作用useRef用于返回一个可变的ref对象。这个refduix的current属性被初始化为useRef传入的参数initialValue。useRef返回的ref对象在整个生命周期中保持不变。（意思是这个ref对象的地址一直不会变）。ref对象变化不会触发视图更新。（但是当有state改变时，ref对象的变化也会显示在视图上）。获取的DOM实例将会储存

Jupiter开发SPA在开发环境调试启动服务yarn dev页面路由一个例子假设jupiter项目的项目结构是src​ pages​ app.tsx​ Front​ About​ index.tsx那么如果我们想要访问app.tsx的页面，需要进入localhost/app如果想要进入about页面，那么需要进入路由localhost/front/about如果路由不对，那么会进入404页面。项目结构梳理常用

React.FCTS泛型TS泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的特性。React.FCReact.FC表示函数式组件，是在TypeScript中使用的一个泛型。为React.FC传入props一个例子interface PropsType{ msg?: string;}const app: React.FC<PropsType> = ({msg}) => { //{msg}相当于解构赋值，从pr

副效应、useEffect、useMemo、useCallback副效应（纯函数只能涉及数据计算，其他操作都是副效应）在函数式编程中，将只利用输入通过一系列计算得到输出的函数叫做纯函数，而如果函数中需要改变外部状态，如修改一个变量的值，那么这部分代码是函数中的副效应。React hook的作用就是利用hook来为纯函数添加副效应。useEffectuseEffect是最常用的React hook，它包含有2个参数，第一个是一个effect函数，第二个参数可选，是一个数组（数组中

React事件处理函数 和 作为props传入子组件的处理函数的不同问题描述有时候我们会遇到事件处理函数的入参不知道从哪里来的的情况（尤其是使用组件库的时候容易遇到这种情况）class Calculator extends React.Component { constructor(props) { super(props); this.handleCelsiusChange = this.handleCelsiusChange.bind(this); this.