React Hooks中父组件中调用子组件方法
摘要：import {useState, useImperativeHandle,forwardRef} from 'react'; // props子组件中需要接受ref let ChildComp = (props,ref) => { // 此处注意useImperativeHandle方法的的第一个
阅读全文
posted @ 2023-09-25 11:10
随笔分类 - react
如何正确搭配使用 useEffect 与 setInterval
摘要：先说一下useEffect的return回调，会在再次调用当前useEffect之前return一次（执行一次）。这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。 背景useEffect 看似很简单，其实不然。由于没有理解 useEffect 的工作原理，我被狠狠坑了
阅读全文
posted @ 2022-11-24 13:47
react 方法内返回dom的方法
摘要：function MyComponent() { return ( <React.Fragment> Some text. <h2>A heading</h2> More text. <h2>Another heading</h2> Even more text. </React.Fragment>
阅读全文
posted @ 2022-10-14 13:40
React-Router-嵌套路由
摘要：嵌套路由(子路由)路由里面又有路由, 我们就称之为嵌套路由 新建 Discover.js: import React from 'react'; import {NavLink, Switch, Route} from "react-router-dom"; function Hot() { ret
阅读全文
posted @ 2022-07-13 15:19
react 前端导出Excel
摘要：1.首先下载 js-export-excel npm install js-export-excel; 2.下载 xlsx npm install xlsx; 3.引入 import * as XLSX from 'xlsx' import ExportJsonExcel from 'js-expo
阅读全文
posted @ 2021-12-24 10:48
react 加载img标签时出错，使用onError事件来增加一个占位图
摘要：1.onError <img src='要显示的图片路径' onError={(e) => {e.target.onerror = null;e.target.src="占位图片路径"}} /> 注 onError：当图片加载出现错误，会触发。经常在这里事件里头写入 将图片导向默认报错图片，以免页面
阅读全文
posted @ 2021-11-15 11:17
强制刷新react hooks组件
摘要：首先要知道react组件在什么情况下会刷新，比如：state、props、context更新。。。。然后就有各种方式可以强行刷新组件了，比如： const [refresh, setRefresh] = useState(false); useEffect(() => { refresh && se
阅读全文
posted @ 2021-09-08 16:34
react hooks方法获取不到最新的state解决方法
摘要：问题在setState方法执行之后，再执行自定义的方法，这个自定义方法里面获取不到最新的state状态 import React, {useState} from "react";import { Button } from "antd" const Demo = () => { const [nu
阅读全文
posted @ 2021-07-08 16:59
useState回调函数
摘要：在看的小朋友，新的react hook写法，官方默认setState方法移除了回调函数，推荐使用useEffect，但是改动的数据过多还是有很多问题。so，我在useState基础上扩展了回调函数功能，就可以像以前类写法一样传递回调方法啦。 话不多说上代码 import {useEffect, us
阅读全文
posted @ 2021-07-08 16:35
React中使用react-file-viewer，实现预览office文件（pdf,word,xlsx等文件）前端实现
摘要：最近做一个项目要求在前端浏览器可以直接打开office文件（pdf,doc,xlsx等文件）。pdf浏览器可以直接打开（可以直接用a标签href="文件地址"或者iframe标签src="文件地址"再或者使用pdf.js）。但是word,xlsl等文件很难实现，网上的实现方式有微软的方法实现但是访问
阅读全文
posted @ 2021-07-07 15:44
解决React 的<img >src使用require的方式图片显示不出来，展示的是[object Module]的问题
摘要：代码： <div className="bigPic"> <img src={require('../../images/bg.png')} alt="" /> </div> 此时的图片显示不出来 解决方法一、 再导入的图片后加.default即可 <img src={require('../../
阅读全文
posted @ 2021-07-06 17:02
react map 双重循环 嵌套循环
摘要：json数据如下: { "items":[ { "item": "BeJson", "menuItem": ["menu1","menu2","menu3"] }, { "item": "mary", "menuItem": ["menu1","menu2","menu3"] }, { "item"
阅读全文
posted @ 2021-06-03 15:41
JSX语法详解
摘要：一、基础1、JSX是什么JSX是一种像下面这样的语法： const element = <h1>Hello, world!</h1>;它是一种JavaScript语法扩展，在React中可以方便地用来描述UI。 本质上，JSX为我们提供了创建React元素方法（React.createElement
阅读全文
posted @ 2021-05-24 18:05
Route的exact属性
摘要：exact是Route下的一个属性，react路由会匹配到所有能匹配到的路由组件，exact能够使得路由的匹配更严格一些。 exact的值为bool型，为true时表示严格匹配，为false时为正常匹配。 例子如下： <Route path='/' component={Home} /> <Rout
阅读全文
posted @ 2021-05-17 14:22
谈谈react hooks的优缺点
摘要：前言Hook 是 React 16.8 的新增特性。它是完全可选的，并且100%向后兼容。它可以让你使用函数组件的方式，运用类组件以及 react 其他的一些特性，比如管理状态、生命周期钩子等。从概念上讲，React 组件一直更像是函数。而 Hook 则拥抱了函数，同时也没有牺牲 React 的精神
阅读全文
posted @ 2021-04-25 15:32
react的Router的exact、path、component、strict属性
摘要：type Location = { //这是一个location pathname: Pathname; search: QueryString; query: Query; state: LocationState; action: Action; key: LocationKey;};class
阅读全文
posted @ 2021-04-12 17:30
react 父组件调用子组件中的方法
摘要：组件间通信除了props外还有onRef方法，不过React官方文档建议不要过度依赖ref。 //父组件 import React, { Component } from "react"; import Child from "./Child"; class Dad extends Componen
阅读全文
posted @ 2021-03-26 15:16
jspdf用法
摘要：介绍一下纯jspdf用法，将一个图片列表导出为pdf文件，根据图片宽高计算在pdf中的位置 jsPDF 是一个基于 HTML5 的客户端解决方案，用于生成各种用途的 PDF 文档。 1、安装：npm install jspdf 2、引入：import jsPDF from "jspdf" 3、使用：
阅读全文
posted @ 2021-01-14 11:26
使用react+html2canvas+jspdf实现生成pdf文件
摘要：导入html2canvas和jspdf插件到项目中 npm install html2canvas npm install jspdf 引入html2canvas和jspdf到jsx中 import jsPDF from 'jspdf' import html2canvas from 'html2c
阅读全文
posted @ 2021-01-13 10:45
React跳转路由传参3种方法和区别
摘要：1、params传参 路由表配置：参数地址栏显示路由页面：<Route path='/demo/:id' component={Demo}></Route> //配置 /:id路由跳转并传递参数： 链接方式：<Link to={'/demo/' + '2'}>XX</Link> js方式：this.
阅读全文
posted @ 2020-12-07 17:58
