React,React开发,React教程文章

React如何使用Braft Editor符文本编辑器

2021-08-22

Braft Editor符文本编辑器，美观好用的React富文本编辑器。官网地址：http://braft.margox.cn/1、安装使用npm或者yarn来将本编辑器加入到你的项目中：# 使用npm安装npm install braft-editor --save # 使用yarn安装yarn add braft-editor 2、使用编辑器支持value和onChange属性，这类似于React中原生的input组件。通常情况下，可以用典型的受控组件的形式来使用本编辑器：2.1、页面代码部分<Form.Item> <BraftEditor value={editorState} onChange={(e)=>handleEditorChange(e)} /> </Form.Item> 通过onCh

react+antd实现图片上传预览功能

2021-08-21

4931 0

效果展示：文件选择上传和拖拽上传控件Upload上传页面代码部分：import React, {useEffect, useState} from 'react' import { Breadcrumb, Upload, message, Image, BarcodeOutlined} from 'antd'; import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'; function Add() { ; ; return ( ; ; ; ; <div> ; ; ; ; ; ; ;<Breadcrumb style={{ margin: '16px 0' }}> ; ; ; ; ; ; ; ; <Breadcrumb.Item>主页</Breadcrumb.Item> ; ; ; ; ; ; ; ; <Breadcrumb.Item>文章添加</Breadcrumb.Item&

react+adtd实现表格数据分页

2021-08-21

2121 0

效果展示1、;表格代码：<Table columns={columns} bordered dataSource={dataSource} pagination={{ ;;;;;;total:total, ;;;;;;showQuickJumper: true, ;;;;;;pageSizeOptions:[10, 20, 50, 100], ;;;;;;pageSize:10, ;;;;;;onChange:loadData, ;;;;;;showTotal: total => `共${total}条记录 ` ;;;;;;}}> </Table> 2、;定义表格列const columns = [ ;;;;;;;{ ;;;;;;;;;;;title: '序号', ;;;;;;;;;;;key: 'id', ;;;;;;;;;;;width: 80, ;;;;;;;;;;;align: 'center', ;;;;;;;;;;;render: (txt, record, index) =>index + 1

Ant Design框架分页汉化

2021-08-20

2894 0

Ant Design分页，默认是英文，看着很不习惯，我们可以进行汉化，antd本身带有中文语言包，当我们引入antd，就可以进行汉化了，事实上antd为了进行国际化，本身就有多个语言包汉化方法1、引入语言包// 在需要用到的组件文件中引入中文语言包 import zhCN from 'antd/es/locale/zh_CN'; // 引入国际化配置 import { ConfigProvider,Table } from 'antd'; 2、使用<ConfigProvider locale={ zhCN }>;</ConfigProvider>包裹着表格import React, {useEffect, useState} from 'react' import { Breadcrumb, Card, Table, Button, P

react+antd实现登录退出功能

2021-08-20

4162 0

本文实现react+antd框架实现登录记录token功能和退出功能一、登录功能：1、;页面代码部分import React from 'react' import { Form, Input, Button, Image, message } from 'antd'; import { UserOutlined, LockOutlined, BarcodeOutlined } from '@ant-design/icons'; function Login(props) { ;;;return ( ;;;;;;;<div className="login-box"> ;;;;;;;;;;;<div className="login-min"> ;;;;;;;;;;;;;;;<div className="avatar_box"> ;;;;;;;;;;;;;;;;;;;<img src="./logo192.png" alt="" /> ;;;;;;;;;;;;;;;&l

react封装axios请求接口

2021-08-20

3014 0

我们每次都要请求数据，为了方便后期的维护和修改，我们可以对axios请求进行分装1、安装axios插件npm isntall axios –save 2、新建request.js文件，用于封装axiosimport axios from "axios"; import { getToken } from './auth' const instance = axios.create({ ;;;baseURL: 'http://vue.tpxhm.top/', ;;;timeout: 5000 }) // 添加请求拦截器 instance.interceptors.request.use(function (config) { ;;;// 在发送请求之前做些什么 ;;;config.headers['token'] = getToken() ;;;return config; ;}, function (error) { ;;;// 对请求

react+antd Form表单的使用、验证

2021-08-19

3428 0

antd Form表单高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。例子：import React from 'react' import { Form, Input, Button, Checkbox } from 'antd'; import { UserOutlined, LockOutlined, BarcodeOutlined } from '@ant-design/icons'; function Login(props) { ;;;const onFinish = (values) => { ;;;;;;;console.log('Success:', values); ;;;;;}; ;;;return ( ;;;;;;;<div className="login-box"> ;;;;;;;;;;;<div className="login-min"> ;;;;;;;;;;;;;;;<div className="avatar_box">

react antd 报错TypeError: antd__WEBPACK_IMPORTED_MODULE_1__.Form.create(...) is not a function

2021-08-19

3862 0

TypeError: antd__WEBPACK_IMPORTED_MODULE_1__.Form.create(...) is not a function解决方法1、看是不是antd版本的问题，新版本已经废弃create2、如果排除版本以及编写逻辑都正确，一定要去检查一下单词是否拼错、大小写问题等不容易被发现的细节export default Form.create({name: 'loginForm'})(Login);

react+ant报错TypeError: Cannot destructure property 'getFieldDecorator' of 'props.form' as it is undefined.

2021-08-19

3166 0

TypeError: Cannot destructure property 'getFieldDecorator' of 'props.form' as it is undefined.在最后导出的时候请使用export default Form.create()(Login);

React+antd 报错Warning: Invalid DOM property `class`. Did you mean `className`?

2021-08-18

3161 0

Warning: Invalid DOM property `class`. Did you mean `className`?出现这个问题是因为很多初学者编写代码className选择器写错原因。写成class了。修改修改下即可。

react+antd通过token判断是否登录

2021-08-18

3256 0

1、;新建until目录，并新建auth.js文件，用户获取token，并判断权限// 获取token export function getToken(){ ;;;return localStorage.getItem('token') } // 设置token export function setToken(token){ ;;;localStorage.setItem('token',token); } // 判断token是否存在 export function isLogined(){ ;;;if(localStorage.getItem('token')){ ;;;;;;;return true ;;;}else{ ;;;;;;;return false ;;;} } 2、;在APP.js中引入改文件import { isLogined } from './utils/auth' 3、;通过三元运算符判断是否获取到token有的话进入后台首页

react+antd点击按钮跳转页面方法

2021-08-17

4281 0

按钮点击跳转主要使用onClick={()=>props.history.push("/admin/wecome")}例子：import React from 'react' import { Button} from 'antd'; function Article(props) { ;;;return ( ;;;;;;;<div> ;;;;;;;;;;;<Button type="primary" size="middle" onClick={()=>props.history.push("/admin/wecome")}>添加文章</Button> ;;;;;;;</div> ;;;) } export default Article

React+antd 如何使用Table表格

2021-08-17

2695 0

效果展示：1、;引入组件import React from 'react' import { Breadcrumb, Card, Table, Button } from 'antd'; import { render } from '@testing-library/react'; 2、;编写页面function Article() { ;;;const columns = [ ;;;;;;;{ ;;;;;;;;;;;title: '序号', ;;;;;;;;;;;key: 'id', ;;;;;;;;;;;width: 80, ;;;;;;;;;;;align: 'center', ;;;;;;;;;;;render: (txt, record, index) =>index + 1 ;;;;;;;}, ;;;;;;;{ ;;;;;;;;;;;title: '标题', ;;;;;;;;;;;dataIndex: 'title' ;;;;;;;}, ;;;;;;;{ ;;;;;;;;;;;title: '分类', ;;;;;;;;;;;

React 报错TypeError: Cannot read property 'push' of undefined

2021-08-16

2152 0

TypeError: Cannot read property 'push' of undefinedonClickF:/study/react/react-admin/src/compoments/Frame/Index.js:44;41 | {routes.map(routes=>{;42 |;;return (;43 |;;<Menu.Item key={routes.path}> 44 |;;;onClick={p=>props.history.push(p.key)} >;;;;| ^;45 |;;;;<IconFont type={routes.icon} /> ;46 |;;;;{routes.title};47 |;;;;</Menu.Item>View compiled出现这个问题是因为我们没有引入withRouter我们引入即可import { withRouter } from 'react-router-dom' export default wit

React+ Ant Design如何引入阿里图标库

2021-08-16

2312 0

对于使用 iconfont.cn 的用户，通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段，即可轻松地使用已有项目中的图标。import { createFromIconfontCN } from '@ant-design/icons'; const IconFont = createFromIconfontCN({ ;scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', }); ReactDOM.render( ;<div className="icons-list"> ;;;<IconFont type="icon-tuichu" /> ;;;<IconFont type="icon-facebook" /> ;;;<IconFont type="icon-twitter" /> ;</div>, ;mountNode, );

关于Line 14:1: Import in body of module; reorder to top import/first的解决方法

2021-08-15

2082 0

一、问题：最近在react antd框架中，引入阿里云图标库出现下面的错误。Failed to compilesrc\compoments\Frame\Index.js;Line 14:1:;Import in body of module; reorder to top;import/firstSearch for the keywords to learn more about each error.来源代码：const { SubMenu } = Menu; const { Header, Content, Sider } = Layout; // 引入阿里图标库 import { createFromIconfontCN } from '@ant-design/icons'; const IconFont = createFromIconfontCN({ ;scriptUrl: '//at.alicdn.com/t/font_2742997_8grglts0v4.js', }); 二、解决

React+ Ant Design图标的使用方法

2021-08-15

3339 0

1、引入图标import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons'; 2、使用图标icon={图标名称}><SubMenu key="sub2" icon={<LaptopOutlined />}> ;;<Menu.Item key="5">option5</Menu.Item> </SubMenu> 效果展示

React如何引入外部css样式

2021-08-14

3011 0

比如有下面这段代码import React from 'react' import 'antd/dist/antd.css'; import { Layout, Menu, Breadcrumb } from 'antd'; const { Header} = Layout; function Index(props) { ;const state = { ;;;collapsed: false, ;}; ;;;return ( ;;;;;<Layout> ;;;;;;;;;<Header className="header"> ;;;;;;;;;;;<div className="logo"> ;;;;;;;;;;;;;;<img src="./logo192.png" alt="" /> ;;;;;;;;;;;;;;<span>Ant Design</span> ;;;;;;;;;;;</div> ;;;;;;;;;</Header> ;;;;;</Layout

React路由封装、404页面设置

2021-08-14

2284 0

1、;项目根目录下新建routes路由文件夹和路由文件index.js，在index.js添加如下代码，用与存放路由、配置路由，分别添加了mainRoutes和adminRoutes模块import Login from '../pages/Login/Login'; import Wecome from '../pages/Home/Wecome'; import PageNotFound from '../pages/PageNotFound/PageNotFound'; export const mainRoutes = [ ;;;{ ;;;;;;;path: '/login', ;;;;;;;component: Login ;;;}, ;;;{ ;;;;;;;path: '/404', ;;;;;;;component: PageNotFound ;;;} ] export const adminRoutes = [{ ;;;path: '/admin/wecome', ;;;c

react如何使用路由、路由使用方法

2021-08-13

2279 0

1、;首先安装路由npm i react-router-dom插件，已安装的可以跳过npm i react-router-dom 2、打开项目下src\index.js文件，添加如下代码import {HashRouter as Router, Switch, Route} from 'react-router-dom'; import Login from './pages/Login/Login'; import Wecome from './pages/Home/Wecome'; 3、;路由部分代码，path为路径，component为组件地址ReactDOM.render( ;<Router> ;;;<Switch> ;;;;;<Route path="/login" component={Login}/> ;;;;;<Route path="/wecome" component={Wecome}/> ;;;</Switch&

react项目引入antd框架和路由

2021-08-12

2025 0

1、;安装antd框架npm i antd 2、;安装路由npm i react-router-dom 3、;引入antd打开项目下的src\App.js，添加如下代码import {Button} from 'antd'; import 'antd/dist/antd.css'; 使用测试<Button type="primary">Primary</Button>

React如何使用Braft Editor符文本编辑器

react+antd实现图片上传预览功能

react+adtd实现表格数据分页

Ant Design框架分页汉化

react+antd实现登录退出功能

react封装axios请求接口

react+antd Form表单的使用、验证

react antd 报错TypeError: antd__WEBPACK_IMPORTED_MODULE_1__.Form.create(...) is not a function

react+ant报错TypeError: Cannot destructure property 'getFieldDecorator' of 'props.form' as it is undefined.

React+antd 报错Warning: Invalid DOM property `class`. Did you mean `className`?

react+antd通过token判断是否登录

react+antd点击按钮跳转页面方法

React+antd 如何使用Table表格

React 报错TypeError: Cannot read property 'push' of undefined

React+ Ant Design如何引入阿里图标库

关于Line 14:1: Import in body of module; reorder to top import/first的解决方法

React+ Ant Design图标的使用方法

React如何引入外部css样式

React路由封装、404页面设置

react如何使用路由、路由使用方法

react项目引入antd框架和路由

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

React如何使用Braft Editor符文本编辑器

react+antd实现图片上传预览功能

react+adtd实现表格数据分页

Ant Design框架分页汉化

react+antd实现登录退出功能

react封装axios请求接口

react+antd Form表单的使用、验证

react antd 报错TypeError: antd__WEBPACK_IMPORTED_MODULE_1__.Form.create(...) is not a function

react+ant报错TypeError: Cannot destructure property 'getFieldDecorator' of 'props.form' as it is undefined.

React+antd 报错Warning: Invalid DOM property `class`. Did you mean `className`?

react+antd通过token判断是否登录

react+antd点击按钮跳转页面方法

React+antd 如何使用Table表格

React 报错TypeError: Cannot read property 'push' of undefined

React+ Ant Design如何引入阿里图标库

关于Line 14:1: Import in body of module; reorder to top import/first的解决方法

React+ Ant Design图标的使用方法

React如何引入外部css样式

React路由封装、404页面设置

react如何使用路由、路由使用方法

react项目引入antd框架和路由

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录