![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 62
浩星
95后的我从小鲜肉变成老腊肉了
展开
-
react的useState的使用方法
前言: 在react16.8版本后新增加了hook,这里来记录下hook里面的State Hook具体使用:1、引入import React, { useState } from 'react'2、定义一个变量digitalFlopData ,并提供更改他的方法为setData,注意,这里的setData不是固定的,是可以自己定义的export default () => { const [digitalFlopData, setData] = useS...原创 2021-07-15 19:05:02 · 1910 阅读 · 0 评论 -
react学习笔记之hook
摘自官网:入口目录:Hook 简介Hook 概览使用 State Hook使用 Effect HookHook 规则自定义 HookHook API 索引Hooks FAQHook 简介Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。import React, { useState } from 'react';function Example() { // .原创 2021-07-15 18:53:05 · 488 阅读 · 0 评论 -
useEffect使用指南
来源:XJBT的https://www.jianshu.com/p/fd17ce2d7e46本文是阅读A Complete Guide to useEffect之后的个人总结,建议拜读原文理解hooks工作机制可以这样说,在使用了useState或是useEffect这样的hooks之后,每次组件在render的时候都生成了一份本次render的state、function、effects,这些与之前或是之后的render里面的内容都是没有关系的。而对于class component来说,sta原创 2021-07-15 17:56:59 · 800 阅读 · 0 评论 -
前端大屏幕项目大厂解决兼容问题(react)
想必近几年前端的数据可视化越来越重要了,很多甲方爸爸都喜欢那种炫酷的大屏幕设计,类似如下这种:随便找的.jpg遇到的这样的项目,二话不说,echarts或者antv,再搭配各种mvvm框架(react,vue),找二次封装过的组件,然后开始埋头开始写了,写着写着你会发现,如何适配不同屏幕呢?css媒体查询吧,用vw吧,哪个好点呢。其实写到最后,我觉得都不好对于这种拿不定主意的情况呢,最好还是参考大厂的做法,于是去找了网易有数,百度suger等,他们是如何写这样的页面的提供2个他们的转载 2021-07-15 10:02:40 · 1553 阅读 · 3 评论 -
react中实现取色器的效果React Color
前言: react中实现取色器的效果官网地址:入口源码:https://github.com/casesandberg/react-color.git实现效果:步骤:第一:引入npm install react-color --save第二:注册import React from 'react'import { SketchPicker } from 'react-color'class Component extends React.Comp...原创 2021-07-07 15:40:30 · 1368 阅读 · 0 评论 -
react上传文件转base64
前言: react有一个第三方插件 ReactFileReader 可以实现这个功能。实现步骤:1.安装插件npm install react-file-reader --save2.代码引入import ReactFileReader from "react-file-reader";3.写页面方法<ReactFileReader fileTypes={[".png",".jpg",".gif", "jpeg"]} base...原创 2020-11-12 10:59:04 · 2690 阅读 · 0 评论 -
react-router实现类似vue-router路由守卫
前言: 摘取网上资料react-router没有vue-router 的beforeEach钩子函数,可以使用react-router-config这个库去实现权限控制。:所用react-router版本4.Ximport React from 'react'import { Route, Redirect, Switch } from 'react-router-dom'const renderRoutes = (routes, authed, authPath = ...转载 2020-09-18 14:04:43 · 1537 阅读 · 0 评论 -
React Router v4 & v5 拦截器(钩子)、静态路由、route-view 实现
前提React Router再v3版本之前 是有onEnter钩子函数的,也支持静态路由配置;,但到了v4版本后钩子函数被移除,官方说是为了将此提供给开发者,由开发者自由发挥。既然如此我们就只能自己实现,目前网上有很多版本,大多都是差不多的,这里做一个总结并深化一下。同时提供钩子函数或者vue中叫路由守卫和静态化路由配置。钩子函数实现钩子函数实现比较简单,只需要包装一下官方的路由即可实现,这里我们允许钩子支持Promise异步,就需要一个异步组件;代码如下异步组件代码...转载 2020-09-18 14:01:54 · 1919 阅读 · 0 评论 -
react中使用css编译器sass,less
前言: 在使用react时发现,react对sass的支持程度比less大多了,当然这里罗列下两种方法,可以使用自己想要的方法。一、sass(支持)1、安装命令cnpm i node-sass --saveyarn add node-sass2、新建scss文件.header{ width:100%; height:60px; display: flex; justify-content: space-between; ba...原创 2020-09-16 16:02:53 · 552 阅读 · 0 评论 -
react报错: Multiple configuration files found. Please remove one: – package.json#babel
前言: 在装antd的时候在根目录下建立了一个.babelrc,又下载sass时报错,问题:这个问题是create react app 里面的package.json里面已经配置了"babel":{"presets":["react-app"]}这样的配置,但是又在根目录下建立了一个babelrc的文件,所以导致重复解决办法:把.babelrc删了...原创 2020-09-16 15:56:18 · 729 阅读 · 0 评论 -
react常用的UI框架
前言: 整理一些react使用的框架,序号不代表排名1、Material-UI2、React Desktop3、Semantic-UI-React4、Ant-design5、Blueprint6、React-BootstrapReact-Bootstrap是一款基于ReactJS对Bootstrap进行封装的库。7、React-Toolbox允许你只需要引入CSS,而不需要使用像Purify-CSS这样的工具。另外React-toolbox还是包括了30...原创 2020-09-15 13:57:46 · 876 阅读 · 2 评论 -
react中配置@
前言: 但是在react中,不能直接使用@,需要更改webpack的相关配置。前提: 先把build文件夹弄出来,如果没有,一定注意本地不能有任何文件,必须提交完,最好新建项目直接输入效果最好npm run eject操作步骤: config/webpack.config.js文件的alias中插入代码 '@': path.resolve('src')...原创 2020-09-15 13:49:33 · 3072 阅读 · 0 评论 -
Can‘t resolve ‘redux‘ in ‘E:\project\react-bigScreen\node_modules\_react-redux@7.2.1@react-redux\
前言: 在react中使用react-redux的报错解决办法:npm install --save redux react-redux原创 2020-09-14 20:29:34 · 1086 阅读 · 2 评论 -
react:npm run eject报错
前言: 我们用creat-react-app创建项目的时候是没有显示config这个文件夹的,为了让他显示有两种办法。其中一种是npm run eject,但是我这边执行的时候报错下面:报错原因:本地有未提交文件解决办法:先都提交到git上在执行,或者先提交到本地,也可以...原创 2020-09-14 17:15:15 · 215 阅读 · 0 评论 -
解决移动端300毫秒点击延迟问题-react/vue
前言: 在写移动端时,有个问题是300毫秒点击延迟问题,解决办法:引入fastclick步骤:1、下载插件cnpm install fastclick --save 2、vue-main.js react-index.js中注册import FastClick from 'fastclick' FastClick.attach(document.body);...原创 2020-09-14 16:31:54 · 330 阅读 · 0 评论 -
react项目修改端口号的方法
前言: react中改变默认3000端口号方法在项目的 package.json里面找到start, 加上set PORT=9600 &&最终效果:原创 2020-09-14 16:25:08 · 1487 阅读 · 1 评论 -
react子组件向父组件传递数据
前言: react中子组件和父组件直接的数据传递class Son extends React.Component { render() { return <input onChange={this.props.onChange}/>; }}class Father extends React.Component { constructor() { super(); this.state = { son: "" ...原创 2020-08-12 17:11:51 · 249 阅读 · 0 评论 -
react+antd的后台管理项目模板
前言: 在学习react时老是希望有个模板可以让我们来参考,优化自己的代码,遍寻百度无效果,后来发现 zzh1918 大大自己写了个类似vue中iview-admin, vue-element-admin 那种后台模板的项目,虽然不是很大,但是还是很感动的,就是他的git地址下载实在太慢了,我这边下载好几个小时,断了3次才下载下来,所以在这里分享下,给需要的小伙伴提供些便...原创 2020-03-25 11:36:50 · 3055 阅读 · 0 评论 -
react脚手架创建项目
入口:https://blog.csdn.net/twodogya/article/details/86065090原创 2019-03-29 16:47:53 · 205 阅读 · 0 评论