react
关注
分享
扫一扫
react笔记
江禾
我是一个小菜鸡，又菜又辣鸡。
展开
-
前端使用懒加载+分页实现大量数据的渲染
import React, { useState, useEffect } from "react"import { Input } from 'antd';const { Search } = Input;let curPage = 1;//当前页数let prevY = 0;let searchData = []function Test() { const [list, setList] = useState([]) let data = []; let pa原创 2021-08-10 16:49:01 · 1477 阅读 · 2 评论 -
react父组件如何调用子组件的方法
父组件<button onClick={this.reset}>重置</button><Son ref='son' onRef={this.onRef}></Son>reset=()=>{ this.son.clickReset()}onRef=(ref)=>{ this.son=ref}子组件componentDidMount=()=>{ this.props.onRef(this)}clickReset=原创 2021-03-02 16:36:39 · 256 阅读 · 0 评论 -
js实现鼠标滚轮图片放大缩小
<!doctype html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document</title></head><body> <img id="img" src="11.png" alt="" style="width:100p原创 2020-09-16 16:06:42 · 6436 阅读 · 0 评论 -
react里面实现图片旋转效果
1.新建文件夹rotate.jsclass RotateImg { constructor() { this.el = null; } init(cls) { this.el = document.getElementById(cls); // this.el = document.getElementsByClassName(cls)[0]; return this; } DragStart() { this.el.onmou原创 2020-09-06 22:36:37 · 2239 阅读 · 0 评论 -
react应用数据可视化
地址:https://echarts.apache.org/examples/zh/index.html#chart-type-radar1.下载依赖包npm add echarts -S2.引入import echarts from ‘echarts’export default class App extends Component { render() { return ( <div> <div id="main" style原创 2020-07-20 21:45:37 · 293 阅读 · 0 评论 -
react的生命周期
1. 挂载卸载过程1.1.constructor()constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。1.2.componentWillMount()componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经 历了constructor原创 2020-07-20 21:43:08 · 100 阅读 · 0 评论 -
实现ant-desgin里的Modal组件拖拽
在使用Modal组件时,新增了一个需求,让他能够实现拖拽的效果1.首先找到控制modal的类名让这个div框变为一个绝对定位,它默认是相对定位,然后可以给它一个高度,如果不给,就是我图中的样子了.在index.less文件里面给它样式,引入index.less.ant-modal-content{ position: absolute !important; width: 480px;}2.封装一个drag.jsdrag.jsclass DragBox { construct原创 2020-07-13 22:06:00 · 921 阅读 · 0 评论 -
使用ant-design组件里面Input,既能传入更改的值,又能编辑该输入框
在使用ant-design组件里面Input时,遇到以下情况:在父组件有个input框,子组件也有一个input框,点击父组件的传入按钮,值能够传入子组件中,且子组件里的input框的里面的值能够编辑父组件import React, { Component } from "react"import { Input, Modal, Button } from 'antd';import Toast from './toast'class Test extends React.Component原创 2020-07-06 21:10:48 · 8492 阅读 · 0 评论 -
在引用ant组件时，报以上的错误
最近刚用框架搭建了一个新的app，在引用ant组件时，报以上的错误解决方式：在index.js里面把它自带的严格模式去掉，就不会报错了。<React.StrictMode></React.StrictMode>去掉该标签原创 2020-07-06 19:29:39 · 300 阅读 · 0 评论 -
接口封装在一个文件里面,用promise把得到的值返回出去
1.在src下新建文件夹config/api.js2.api.jsimport axios from 'axios'class API { getTree () { return new Promise((resolve,reject)=>{ try { const res = axios.get("http://localhost:5000/treeData") console.log(res,"我是你要看的数据")原创 2020-06-14 22:34:57 · 839 阅读 · 0 评论 -
react实现按需加载的3种方法
react实现按需加载的3种方法1.精确加载组件import Button from 'antd/lib/button'import 'antd/lib/button/style'2.暴露配置,配合babel-plugin-import插件实现按需加载babel-plugin-import是一个用于按需加载组件和样式的babel插件暴露配置npm run eject安装插件 npm install babel-plugin-import -S修改package.json"babe原创 2020-05-18 23:17:12 · 3122 阅读 · 0 评论