react
关注
分享
扫一扫
文章平均质量分 61
qianlingvip
这个作者很懒，什么都没留下…
展开
-
同一个项目两个页签之间通信之 BroadcastChannel
MDN 中解释如下：允许同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。原创 2024-08-07 21:51:08 · 479 阅读 · 0 评论 -
react路由拦截（路由守卫）
最近在做项目时候，遇到了返回时候如果用户没有保存表单，需要拦截路由跳转，并给出提示信息是否要退出。相信做过vue项目的小伙伴都对vue的路由守卫并不陌生，react中如何实现呢？原创 2022-10-21 19:00:32 · 13577 阅读 · 1 评论 -
react18的SSR
react18-ssr一、服务端渲染我们的页面DOM结构由服务端产生的，就是服务端渲染。const express = require("express");const app = express();app.get("/", (req, res) => { res.send("<html><body><h2>hello</h2></body></html>");});app.listen(8300, ()原创 2022-04-22 19:29:20 · 2227 阅读 · 0 评论 -
react18新特性
前言：最近在忙于项目，又接了一个谷歌浏览器插件开发的任务，一直没有时间看新的技术更新，突然发现react已经更新到了18，随着react18正式版本发布，我们可以使用新版带来的新特性，快来一起看看都提供了哪些新的特性供我们使用吧。注意：学习用例使用vite + react18搭建项目一、初始化项目1、初始化一个项目npm init -y2、安装react和react-domnpm install react react-dom --save3、安装vite和可以react热更新的@vi.原创 2022-04-21 23:33:34 · 4679 阅读 · 0 评论 -
react项目启动时候，显示启动进度条
前言：当我们做一个新的react项目时候，安装插件越多，启动越慢。如果没有一个进度条来显示目前项目启动进度，没有目的地等待是很让人着急的。因此，使用webpack进度显示插件非常有必要，下面就介绍两种常用的插件。1、webpack-progress-ora-plugin相信做过cli的人都比较熟悉ora插件，可以友好的提示cli进度以及当前所处的节点信息。webpack-progress-ora-plugin插件则是专门用来显示webpack编译进度的。1.1、安装npm install webpa原创 2021-09-04 09:46:42 · 1034 阅读 · 1 评论 -
forwardRef解决封装组件无法传递ref的问题
前言：有时候我们封装一个组件，组件中需要使用父级传进来ref属性，来做一些事情，然而，简单通过props.ref是无法获取传递过来的ref属性的，怎么办呢？组件中又使用hoc进行了包裹，这时候传递ref作为属性传值能传递过来吗？场景重现：import { useRef, useState } from "react";const MyInput = (props) => { console.log(props.ref, 'ref') // undefined return ( &原创 2021-08-17 11:24:16 · 5038 阅读 · 1 评论 -
使用react-three-fiber加载glb格式3D文件，并播放3D模型自带动画
一、react-three-fiber简介使用可重用、自包含的组件以声明方式构建您的场景，这些组件对状态做出反应、易于交互并且可以利用 React 的生态系统。 没有任何限制，一切工作在three.js这里将无一例外地工作。 生态完善。二、安装npm install three @react-three/fiber三、基础语法1、创建场景import { Canvas } from '@react-three/fiber'export default function App() {原创 2021-06-21 18:04:10 · 6541 阅读 · 4 评论 -
前端使用input上传文件本地预览
当我们需要使用input的file做图片上传时候，想要看一下上传的图片，该如何实现呢？具体实现有两种方法1、使用readAsDataURLfunction handleChange() { const myFile = document.querySelector("input[type=file]").files[0]; const img = new Image(); const reader = new FileReader(); // 读取文件资源 if (my原创 2021-03-12 16:14:23 · 967 阅读 · 1 评论 -
react实现复制input输入框内容到粘贴板
整体流程分为如下几步：1、创建新的input输入框2、设置新创建输入框value为需要复制的文本3、将新创建input输入框添加到body里。4、选择中该input区域文本内容5、使用document.execCommand(‘copy’)将文本内容复制到粘贴板6、成功之后移除新创建的input输入框，复制完成。import "./App.css";import {useRef} from 'react';function App() { const myInput=useRef(nu原创 2021-02-26 15:48:38 · 1242 阅读 · 0 评论 -
前端打印踩坑小记
** 提起来前端打印，不得不说api太少了。可供参考的东西也是很少，我在项目上做前端打印有一年多时间，将打印遇到问题总结如下**打印插件选择react项目建议使用react-to-print插件，也可以使用从插件中提炼出来的如下方法；import { findDOMNode } from 'react-dom';// import { delay } from 'core-js';const printElement = (options) => { const { con原创 2021-02-03 15:43:07 · 1470 阅读 · 0 评论 -
不是通过路由切换过来的组件中，如何在props中获取history
withRouter作用首先，我们需要知道withRouter作用，把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上。在下边例子中如果不通过withRouter函数props中没有history对象。withRouter使用方式：首先要引入import { withRouter } from 'react-router-dom';将不是通过路由切换过来的组件，但是又需要获取history对象组件通过w原创 2020-10-08 15:21:19 · 1065 阅读 · 0 评论 -
react的portals传送门实现模态框
引言： 有时候我们需要使用某个组件不是按照正常的层级来显示，比如，我们在一个左侧为菜单，右侧为功能的系统里使用弹出框（类似于antdPro），如果弹出框按照层级展示在功能里，他的位置就会显得有些奇怪，我们想要的是弹出框在整个屏幕中间弹出来，而不是在功能里中心位置展示。想要实现这个需求，必须打破常规。将弹出框在body中展示，这样弹出框和#root是同级的，就不再受左侧菜单的制约。代码实现传送门组件import React, { Component } from "react";import { c原创 2020-09-07 17:23:44 · 424 阅读 · 0 评论 -
设置VSCode编辑器，编辑react的jsx语法自动补全
相信大家都有这样一个苦恼，在使用VSCode写react代码的时候，输入标签后按住table键不好使，没有出现我们想要的补全标签的效果，今天我就帮助大家解决这个问题。 首先我们需要打开VSCode代码编辑器：点击左下角设置图标，选择设置之后，点击打开设置json之后在已有的设置基础上，新增如下代码："emmet.includeLanguages"...原创 2020-03-10 11:38:03 · 1167 阅读 · 0 评论 -
dvajs学习总结
1、dvajs是一个轻量级的应用框架。2、新建dva项目，直接dva new 项目名称3、启动npm start4、dvajs的路由跳转，方式一：通过link跳转，首先引入Link，import{Link}from'dva/router'然后，在需要调转的地方使用<Linkto='/'>首页</Link>方式二：通过点击事件，...原创 2019-11-27 16:33:37 · 3167 阅读 · 0 评论