![](https://img-blog.csdnimg.cn/20190927151101105.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
React
HarryHY
从入门到放弃
展开
-
react——使用mobx
unread.tsimport {makeObservable,observable,action} from "mobx"class unread{ @observable unreadNum:number = 0 constructor(){ makeObservable(this) } @action setUnreadNum(param:number){ this.unreadNum=param }}export原创 2022-05-04 15:40:27 · 628 阅读 · 0 评论 -
ReactHooks——react-image-webp(使用webp格式图片)
下载npm install react-image-webp --save-dev引入import Image from "react-image-webp";使用 <Image src={itemchild.imgsrc} webp={itemchild.img2src} />官方API地址原创 2022-03-14 20:22:37 · 1898 阅读 · 0 评论 -
ReactHooks——ant.design
安装npm install antd --save引入import { Affix, Button } from 'antd';使用 <Affix style={{ position: 'fixed', bottom: 100, right: 25 }}> <div className="backtop" onClick={()=>goBackTop()}> </div>原创 2022-03-11 22:27:44 · 184 阅读 · 0 评论 -
React——返回顶部
使用 const goBackTop=()=>{ document.body.scrollTop = document.documentElement.scrollTop = 0; } <div className="backtop" onClick={()=>goBackTop()}> </div>全部代码import React,{useState} from "react";import copy from "co原创 2022-03-11 22:22:26 · 2908 阅读 · 0 评论 -
is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
useState 中 const [BlogAddress] = useState("https://blog.csdn.net/HarryHY");修改成下面的这种即可 const [Blog_Address] = useState("https://blog.csdn.net/HarryHY");原创 2020-01-09 11:05:44 · 3471 阅读 · 0 评论 -
vscode中react在jsx——Tab自动补全标签
文件====>首选项====>设置在搜索框输入——Emmet====>点击settings.json如图:添加一下如下粘贴复制"emmet.includeLanguages": { "javascript":"javascriptreact" }...原创 2020-01-10 09:34:52 · 415 阅读 · 1 评论 -
React中使用lodash——debounce
安装lodashnpm i --save lodash引入lodashimport _ from "lodash";这里用下lodash的debounce作为一个小demo在constructor中// this.checkLogin = this.checkLogin.bind(this)this.checkLogin = _.debounce(this.checkLogin....原创 2020-01-03 16:06:20 · 9346 阅读 · 2 评论 -
Reate——样式
Class名的规范基于class 但是 react 必须 className 代替class<span className="forget">?</span>内联样式规则基于内联样式 style style={obj} 遵循驼峰命名要写内联样式的时候还需要包一层{ }style={{ backgroundColor: "red", color:"yello...原创 2019-12-20 14:40:19 · 432 阅读 · 0 评论 -
React路由懒加载、组件懒加载
先下载react-loadablenpm i react-loadable -S建立一个loadable.jsimport Loadable from 'react-loadable'; export default function withLoadable (comp) { return Loadable({ loader:comp, load...原创 2019-12-20 14:39:14 · 814 阅读 · 0 评论 -
react插件——Simple React Snippets开发速度飞起来
imrimport React from 'react';imrcimport React, { Component } from 'react';imptimport PropTypes from 'prop-types';impcimport React, { PureComponent } from 'react';ccclass extends Componen...原创 2019-11-20 16:46:09 · 763 阅读 · 0 评论 -
React基础
如何去掉最外层的div不包裹 Fragment 碎片化import React,{Component,Fragment } from 'react' return ( <Fragment> <p></p> </Fragment> )事件的绑定&l...原创 2019-10-31 22:30:51 · 140 阅读 · 0 评论 -
React安装步骤
首先安装全局webpackcnpm i webpack@3.8.1 -g//或者 当具体的项目有规定webpack版本的时候安装哪个版本即可npm i webpack@3.8.1 -g安装开发依赖的webpackcnpm i webpack@3.8.1 -Dnpm i webpack@3.8.1 -D安装async 如果项目中没有用到 则不用安装cnpm i async -S...原创 2019-07-24 21:16:35 · 158 阅读 · 0 评论