React
YoloAva
这个作者很懒,什么都没留下…
展开
-
React antd表单控件+栅格系统控制label长度
import React from 'react'import moment from 'moment';//cnpm i moment --saveimport { Card, Form, Input, Button, Checkbox, Radio, Select, Switch, DatePicker, TimePicker, Upload, Icon, message, InputNumber } from 'antd'const { Option } = Select;const { T.原创 2021-12-10 14:47:28 · 2581 阅读 · 0 评论 -
React antd—current.validateFields实现登录表单校验
import React from 'react'import { Card, Form, Input, Button, message, Checkbox } from 'antd'import { UserOutlined, LockOutlined } from '@ant-design/icons';export default function FormLogin(props) { //获取表单节点 const formRef = React.createRef() //校验.原创 2021-12-10 13:02:03 · 2004 阅读 · 0 评论 -
React antd实现走马灯Carousel
import React from 'react'import { Card, Carousel } from 'antd'import './ui.less'export default function MyCarousel() { const textStyle = { height: '160px', color: '#fff', lineHeight: '160px', textAlign: 'center', background: '#3.原创 2021-12-09 22:38:23 · 3383 阅读 · 2 评论 -
React 后台管理系统路由搭建2.0
src > index.js 入口配置Router,否则页面不知道往哪跳import React from 'react';import ReactDOM from 'react-dom';import './index.css';import Router from './router'ReactDOM.render( <Router />, document.getElementById('root'));src > router.js 根组件需要接原创 2021-12-09 19:44:34 · 397 阅读 · 0 评论 -
React newDate实现实时时间显示
src > components > header > index.jsimport React, { useState, useEffect } from 'react'import './index.less'import { Row, Col } from 'antd';import { Util } from '../../utils/utils';export default function Header() { const [showTime, setSh原创 2021-12-09 17:26:17 · 2157 阅读 · 0 评论 -
React 后台管理系统之权限列表——antd引入、树形表格、删除、配置
RightList.jsimport React, { useState, useEffect } from 'react'import axios from 'axios'import { Table, Tag, Button, Modal, Popover, Switch } from 'antd'import { DeleteOutlined, EditOutlined } from "@ant-design/icons"import { ExclamationCircleOutline原创 2021-12-04 21:16:35 · 1507 阅读 · 0 评论 -
React + CSS 后台管理系统滚动条样式
App.css@import '~antd/dist/antd.css';::-webkit-scrollbar {width:5px;height:5px;position:absolute;}::-webkit-scrollbar-thumb {background-color:#1890ff}::-webkit-scrollbar-track {background-color:#ddd}原创 2021-12-04 14:52:24 · 510 阅读 · 0 评论 -
React 后台管理系统之渲染后端SideMenu导航栏数据
后端接口数据:[ { "id": 1, "title": "首页", "key": "/home", "pagepermisson": 1, "grade": 1, "children": [] }, { "id": 2, "title": "用户管理", "key": "/user-manage", "pagepermisson": 1, "grade": 1, "children": [原创 2021-12-04 14:35:35 · 491 阅读 · 0 评论 -
React 项目启动之路由搭建+antDesign实现管理系统Header+Sider布局
目录规范:1. 子组件都存放在components>父名文件夹中,例如components>sandbox>SideMenu.js2. 页面级组件(带路由)都存放在views>父名文件夹中,例如views>sandbox>NewsSandBox.js;若有NewsSandBox组件中的页面级组件,就在sandbox下再创建文件夹放入,例如views>sandbox>home>home.js路由模块安装指令:cnpm i --save-de..原创 2021-12-03 15:53:56 · 1295 阅读 · 0 评论 -
React 项目启动之反向代理(配置好后一定要重启)
1. npm install http-proxy-middleware --save2. 创建 src > setupProxy.js ()//加载此模块const { createProxyMiddleware } = require('http-proxy-middleware');//每次请求/api,就代理到localhost:3000取数据module.exports = function (app) { app.use( '/api', create原创 2021-12-03 13:23:56 · 460 阅读 · 0 评论 -
React redux-thunk实现首页异步获取数据+加载更多功能(含page参数)案例
1. home > index.jsimport React, { Component } from 'react';import Topic from './components/Topic';import List from './components/List';import Recommend from './components/Recommend';import Writer from './components/Writer';import { HomeWrap...原创 2021-12-02 17:57:02 · 455 阅读 · 0 评论 -
React 实现热门搜索换页功能案例
1. header > index.js组件部分代码import React, { Component } from "react";import { connect } from 'react-redux';import { CSSTransition } from "react-transition-group";import { HeaderWrapper, Logo, Nav, NavItem, NavSearch, Addition, Button, SearchWrapper,原创 2021-12-02 14:16:03 · 496 阅读 · 0 评论 -
React redux之immutable+combineReducers+redux-thunk完成对数据的拆分管理
关于immutable.js:immutable.js是一个第三方模块,可以帮助我们生成一个immutable对象,这个对象不可被变更。若state是一个immutable对象,state就不可以被改变,这样reducer就不会出问题。因此,我们就需要把state变成immutable对象。immutable安装指令:npm i immutable --save ·关于combineReducers:reducer如果存放过多的数据可能会造成代码的不可维护。那么,combineReduce...原创 2021-12-01 22:07:07 · 362 阅读 · 0 评论 -
React 使用immutable.js来管理store中的数据
immutable.js是一个第三方模块,可以帮助我们生成一个immutable对象,这个对象不可被变更。若state是一个immutable对象,state就不可以被改变,这样reducer就不会出问题。因此,我们就需要把state变成immutable对象。immutable安装指令:npm i immutable --save1. 3. 将reducer中state变成immutable对象: src > common > header > store >...原创 2021-12-01 21:11:58 · 262 阅读 · 0 评论 -
React styled-components实现css布局并使用iconfont
styled-components使用方式:在style.js文件中定义一个有样式的组件,组件中再去引入这个组件,进行页面的现实。使用styled-components这个第三方模块的好处:样式都写在style.js文件里,实际上const出来的常量是一个个带样式的组件。这些组件的样式是独享的,他们之间不会产生任何的影响,有效的避免了多个组件可能产生css样式冲突的问题。全局使用公共样式:// src > style.jsimport { createG...原创 2021-12-01 15:51:22 · 384 阅读 · 0 评论 -
JS 数组中的forEach、map、filter、find四个方法的使用方法和案例总结
1. forEach() :主要用于循环遍历数组,forEach不会返回新数组,允许对原数组进行修改。2. map() : 主要用于循环遍历数组,也可在内使用条件语句,map会返回一个新数组,不会改变原来的数组。3.filter() :主要用于筛选过滤数组,返回符合筛选条件的数据,filter会返回一个新数组,不会改变原数组。4. find() :主要用于查找数组的数据,只要查找到第一项符合条件的数据,直接返回,若没有找到符合条件的数据返回undefined。find会返回一个新数组,不会改变.原创 2021-11-28 18:13:30 · 2613 阅读 · 0 评论 -
React withRouter非路由组件中实现编程式路由跳转
import React from 'react';//withRouter可以加工一般组件,让一般组件具备路由组件所特有的API//withRouter的返回值是一个新组件import { withRouter } from 'react-router';class Header extends React.Component { back = () => { this.props.history.goBack() } render() { return (.原创 2021-11-28 12:26:55 · 741 阅读 · 0 评论 -
React 路由跳转携带params、search、state参数,以及编程式路由导航
实现效果——点击展台1、展台2、展台3时,会显示同一个名为Detail路由组件,但是组件接收的值会不一样:文件目录:Message>index.jsx:import React, { Component } from 'react'import { Link, Route } from 'react-router-dom'import Detail from './Detail';export default class Message extends Co...原创 2021-11-27 22:26:28 · 1461 阅读 · 0 评论 -
React 解决 react-router-dom ^6.0.2 报错: A <Route> is only ever to be used as the child of <Routes>
npm i react-router-dom并引入模块后编写路由,却报错: A <Route> is only ever to be used as the child of <Routes>。这是因为react-router-dom^6.0.2高版本的router写法改变。如果想要遵从以前的写法,也可以修改版本依赖为低版本如^4.2.2。如果想适应新版本的写法,解决方法如下。无论高低版本,src>index.js中引入BrowserRouter并包裹App:import R...原创 2021-11-27 18:23:07 · 1391 阅读 · 2 评论 -
React redux集中管理数据案例(增加、删除、axios)
创建Store目录: 父组件TodoList.js以及子组件TodoListUI.js部分(拆分代码实现redux集中管理数据,用无状态的UI组件——子组件做渲染,容器组件——父组件做逻辑)://父import React, { Component } from 'react';import TodoListUI from './TodoListUI';import axios from 'axios'import store from './store'impor...原创 2021-11-27 15:33:06 · 965 阅读 · 0 评论 -
React 有状态组件改造为无状态组件
什么时候使用无状态组件?当我们定一个UI组件的时候,它只负责页面渲染,没有做任何逻辑操作,内部因此只有一个render函数的时候,我们可以通过无状态组件来替换掉有状态组件。无状态组件的优势——性能高,就是一个函数;而有状态组件是js里面的类,类生成的对象中还有生命周期函数,所以既要执行其余的生命周期函数又要执行render,它执行的东西远比无状态组件执行的多得多。一个有状态组件的性能是赶不上一个无状态组件的。//***TodoListUI.js为有状态组件时im...原创 2021-11-27 14:49:54 · 202 阅读 · 0 评论 -
React 使用antDesign
指令npm install antd --save(Ant Design - 一套企业级 UI 设计语言和 React 组件库)import React, { Component } from 'react';import 'antd/dist/antd.css';import { Input, Button, List } from 'antd';const data = [ 'Racing car sprays burning fuel into crowd.',...原创 2021-11-26 22:05:42 · 526 阅读 · 0 评论 -
React react-transition-group实现动画
css3动画:import React, { Component } from "react";import './style.css'export default class App extends Component { constructor(props) { super(props); this.state = { show: true } this.handleToggole = this.handleToggole.bind(this)原创 2021-11-26 19:05:17 · 207 阅读 · 0 评论 -
React ref和setState的第二个参数
import React, { Component } from 'react'import TodoItem from './TodoItem';import "./style.css"class TodoList extends Component { //类中必有constructor函数 而且会最先执行 constructor(props) { super(props); //当一个组件的state或者props发生改变的时候,render函.原创 2021-11-26 14:45:20 · 320 阅读 · 0 评论 -
React ES6扩展运算符、父传子props现实TodoList增加、删除
import React, { Component } from 'react'class TodoList extends Component { //类中必有constructor函数 而且会最先执行 constructor(props) { super(props); this.state = { inputValue: 'dd', //input框内容 list: ["学习js基础", "学习rea.原创 2021-11-25 22:16:09 · 353 阅读 · 0 评论 -
React lazy和suspense实现组件懒加载
lazy()方法是用来对项目代码进行分割,懒加载用的——只有当组件被加载,内部的资源才会导入。为什么需要懒加载?——在React的项目中,webpack等打包工具会将import导入的文件直接合并到一个大文件中,如果项目很大,打包完后初始化加载时需要加载的文件会很大,这时候就需要代码分割。Suspense的作用就是在遇到异步请求或者异步导入组件的时候等待请求和导入完成再进行渲染。//***父组件index.js页面import React,{la...原创 2021-11-24 17:45:00 · 634 阅读 · 0 评论