react
初郁
愿你前程灿烂,愿你得偿所愿
展开
-
react入门 笔记 -- 自定义组件
1.2自定义组件(Component)方式1:工厂函数组件(简单组件)<script type="text/babel"> // 1.定义组件 // 方式1:工厂函数组件(简单组件) function MyComponent() { return <h2>方式1:工厂函数组件(简单组件)</h2> }...原创 2021-03-11 21:41:49 · 240 阅读 · 0 评论 -
react项目-内存中保存user
新建utils文件夹, 用来在内存中保存一些数据的工具模块。建memoryUtils.js文件。export default { user: {} ,//保存当前登录的user}在login跳转之前保存user。login.jsximport memoryUtils from "../../utils/memoryUtils"; //引入 const onFinish = values => { //提交表单且数据验证成功后回调事件 console.log原创 2021-03-11 21:40:07 · 295 阅读 · 0 评论 -
react项目:js中【object object】取值
JSON.stringify() 是从一个字符串中解析出 json 对象。var data='{"name":"goatling"}'//解析对象JSON.parse(data)name:"goatling"JSON.parse() 是从一个字符串中解析出 json 对象。var data={name:'goatling'}JSON.stringify(data)结果是:'{"name":"goatling"}'12345678更多文...原创 2021-03-11 21:39:31 · 1320 阅读 · 0 评论 -
‘react-app-rewired‘ 不是内部或外部命令,也不是可运行的程序或批处理文件
重新下载react-app-rewiredyarn add react-app-rewired customize-cra原创 2020-11-16 21:09:38 · 2534 阅读 · 0 评论 -
react项目:JavaScript 存储对象
Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加、删除、修改、查询操作。存储对象方法方法描述key(n)返回存储对象中第 n 个键的名称getItem(keyname)返回指定键的值setItem(keyname, value)添加键和值,如果对应的值存在,则更新该removeItem(keyname)移除键clear()清除存储对象中所有的键原创 2020-11-07 15:21:39 · 376 阅读 · 0 评论 -
react项目:react拦截器和token问题
这次的交互遇到token问题真的毫无思路,之前想的是将登录的user保存到memoryUtils,通过判断是否有值来确定用户有没有登录,可当请求其他接口时,后端需要将token放到header里带着判断是否登录,以下是问题。登录获取token后,如何对后面的接口统一在请求头header里面设置token,让后面的请求header都带有token。axios拦截器(interceptor)作用:当一个请求发出的时候,会先流过 interceptors 的 request 部分,接着请求会发出,当接受到响原创 2020-11-07 14:38:29 · 2472 阅读 · 0 评论 -
react项目:LeftNav自动打开当前子列表
/** 左侧导航组件* */class LeftNav extends Component { // * 根据menu的数据数组生成对于标签数组 // * 使用reduce() + 递归调用 getMenuNodes = (menuList) =>{ // 得到当前请求的路由路径 const path = this.props.location.pathname return menuList.reduce((pre,i原创 2020-11-03 14:59:14 · 221 阅读 · 0 评论 -
react项目:动态显示菜单列表--map() + 递归调用与使用reduce() + 递归调用
使用map() + 递归调用 导航部分index.jsximport React ,{Component} from "react";import {Link,withRouter} from 'react-router-dom'import {Menu,Icon} from "antd";import menuList from "../../config/menuConfig";import { FileOutlined } from '@ant-design/icons';const {原创 2020-10-31 21:03:33 · 1007 阅读 · 0 评论 -
优化ajax请求函数模块_统一处理请求异常
ajax.js/*能发送异步ajax请求的函数模块* 封装axios库* 函数的返回值是promise对象* */import axios from 'axios'export default function ajax(url,data={},type='GET') { if(type==='GET'){ //发get请求 return axios.get(url,{//配置对象 params:data//指定请求参数原创 2020-10-11 16:01:15 · 111 阅读 · 0 评论 -
react项目:路由
下载路由包: react-router-domyarn add react-router-dom路由组件: pages/login/login.jsx//用户登陆的路由组件import React, {Component} from 'react'export default class Login extends Component { render () { return ( <div>login</div> ) }}后台管理主路由组件: pag原创 2020-09-14 14:53:29 · 186 阅读 · 0 评论 -
react项目:引入antd以及自定义antd主题
antd文档https://ant.design/docs/react/use-with-create-react-app-cn下载组件库包yarn add antd实现组件的按需打包1.下载依赖模块yarn add react-app-rewired customize-cra babel-plugin-import2.定义加载配置的js模块: config-overrides.jsconst {override, fixBabelImports} = require('customize原创 2020-09-14 09:28:30 · 854 阅读 · 0 评论 -
创建react项目
使用 create-react-app 快速构建 React 开发环境create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。create-react-app 自动创建的项目是基于 Webpack + ES6 。执行以下命令创建项目:$ cnpm install -g create-react-app$ create-react-app my-app$ cd my-app/$ npm start在浏览器中打开 http://l原创 2020-09-14 08:46:39 · 181 阅读 · 0 评论 -
React项目_动态显示菜单列表
在src目录下的config文件下建立一个包含所有导航信息的menuConfig.js。将所有导航信息抽离出来存放。const menuList = [ { title:'首页', //菜单标题名称 key:'/home', //对应的path icon:'TeamOutlined',//图标名称 }, { title:'用户管理', key:'/user', icon:'TeamOu原创 2020-09-05 08:43:49 · 1429 阅读 · 1 评论 -
antd4 form表单
import React, {Component} from "react";import { Form, Input, Button, Checkbox } from 'antd';import {message} from "antd";import { UserOutlined, LockOutlined } from '@ant-design/icons';import './login.css';import {reqLogin} from '../../api'import {req原创 2020-09-04 14:32:53 · 375 阅读 · 0 评论