黄孝果的博客

修改config/config.ts dva: { hmr: true, immer: { enableES5: true }//如需兼容 IE11，需配置 }, targets: { ie: 11, }, //如果适配ie11 请注释下面esbuild // esbuild: {},// https://umijs.org/config/import { defineConfig } from 'umi';import defaultSett.

效果展示创建模块配置路由及配置代理在config/proxy.ts中/** * 在生产环境 代理是无法生效的，所以这里没有生产环境的配置 * The agent cannot take effect in the production environment * so there is no configuration of the production environment * For details, please see * https://pro.ant.des.

tinymce-react官方：https://github.com/tinymce/tinymce-react效果：第一步:导入依赖yarn add tinymce yarn add @tinymce/tinymce-react 第二步：拷贝tinymce将在 https://www.tiny.cloud/get-tiny/self-hosted/ 网站中下载的文件包 ，放到我们的public 下:然后引入 document.ejs中:<s

提供登录与获取用户信息数据接口import request from '@/utils/request';/** * * @returns 首页列表权限 */export async function queryCurrent():Promise<any>{ return request('/user/info2', { prefix:'/mock', method: 'GET', });}登录接口数据{'code': 200, 'data'.

主要使用@umijs/plugin-modelhttps://umijs.org/zh-CN/plugins/plugin-model#启用方式在src目录下创建models，并创建数据存储tsappstore.ts提供数据仓库import { useState, useCallback } from 'react'export default () => { const [user, setUser] = useState({}) const setUser.

效果展示导入yarn add @ant-design/pro-table//使用DatePicker时间选择器yarn add moment 创建user模块配置路由及配置代理在.umire.ts中import { defineConfig } from 'umi';export default defineConfig({ nodeModulesTransform: { type: 'none', }, routes: [ { pa.

效果展示创建user模块配置路由及配置代理在.umire.ts中import { defineConfig } from 'umi';export default defineConfig({ nodeModulesTransform: { type: 'none', }, routes: [ { path: '/', component: '@/pages/users/index' }, ], fastRefresh: {}, pro.

效果展示创建user模块配置路由及配置代理在.umire.ts中import { defineConfig } from 'umi';export default defineConfig({ nodeModulesTransform: { type: 'none', }, routes: [ { path: '/', component: '@/pages/users/index' }, ], fastRefresh: {}, proxy: {.

在modal弹窗框中使用From表单报错devScripts.js:5836 Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?官方文档解释：在modal中加上forceRender 强制加载更新From表单内容报错Cannot update during an existing state transition (such as.

创建ajax请求文件 service.ts编写ajax请求import { request } from 'umi';export async function getRemoteList() { return request('/api/users', { method: 'get' }) .then(response => { return response }) .catc.

创建主页面index.tsx和数据存储model.ts内置 dva约定式的 model 组织方式，不用手动注册 model文件名即 namespace，model 内如果没有声明 namespace，会以文件名作为 namespace内置 dva-loading，直接 connect loading 字段使用即可支持 immer，通过配置 immer 开启约定式的 model 组织方式 符合以下规则的文件会被认为是 model 文件， src/models 下的文件 .

创建主页面index.tsx和数据存储model.ts内置 dva约定式的 model 组织方式，不用手动注册 model文件名即 namespace，model 内如果没有声明 namespace，会以文件名作为 namespace内置 dva-loading，直接 connect loading 字段使用即可支持 immer，通过配置 immer 开启约定式的 model 组织方式 符合以下规则的文件会被认为是 model 文件， src/models 下的文件 .

umi.js安装npm install -g umi 查看umi.js版本umi -v创建umi项目先找个地方建个空目录。$ mkdir myapp && cd myapp通过官方工具创建项目$ yarn create @umijs/umi-app# 或 npx @umijs/create-umi-app创建ant-design-pro项目yarn create umi运行yarnyarn dev...

非空断言操作符 ！let name:string = 'huxngxiaoguo'let nus:string;console.log(name.trim())//非空断言操作符 ! 可以消除编辑器 当nus为undefined时候报错//使用时注意 保证nus不为undefined，否则运行时会报错console.log(nus!.trim())export {};泛型const addUID = <T extends { name: string }&g.

创建接口export interface HasFormatter { name?: string;//可以实现也可以不实现 age?: number; format(): string;}实现类import { HasFormatter } from "../interfaces/hasformatter";class Invoice2 implements HasFormatter { constructor( private cl.

interface IsPerson { name: string; age: number; speak(a: string): void; spend(a: number): string;}/***********************************普通实现**************************************** */const me: IsPerson = { name: "shaun", age: 30.

创建类模块class Invoice { // private client: string; // public details: string; // readonly amount: number; constructor( private client: string, //内部访问可修改 public details: string, readonly amount: number //内部访问不可修改 .

// classesclass Invoice { // private client: string; // public details: string; // readonly amount: number; constructor( private client: string, //内部访问可修改 public details: string, readonly amount: number //内部访问不可修改

class Invoice { client: string; details: string; amount: number; constructor(c: string, d: string, a: number) { this.client = c; this.details = d; this.amount = a; } format() { return `${this.client} o.

// let greet: Function;//// greet = (name: string): void => {// console.log(`hello ${name}`);// };//// greet('world')/**********************参数限制********************************** *///声明let greet: (a: string, b: string) => void;//实现gree

//将sting和number类型封装为StringOrNum类型type StringOrNum = string | number;const logDetails = (uid: StringOrNum, item: string) => { console.log(`${item} has a uid of ${uid}`);};logDetails(1111, "world");// ------------------------------------------.

/*****************************参数默认值********************************* */const add: Function = (num1: number, num2: number = 10) => { return num1 + num2;};function add2(num1: number, num2: number = 10) { return num1 + num2;};function add3(.

let staff: any = 119;console.log(staff);staff = "ruby";staff = { name: "ruby",};staff = [1];console.log(staff)// --------------------------------------------------------------------let languages: any[] = ["ruby", 18, [1], { name: "ruby" }]

/*******************************联合类型**************************************** */let money: string | number | boolean = 9;money = "5";money = 6;console.log(money)/*******************************数组类型**************************************** */let lan.

/****************************数组***********************************/let languages = ["ruby", "js", "dart", "python"];console.log(languages[0]);languages.push("java");//ts报错（默认只能存字符串）// languages.push(222);languages[0] = "rust";console.log(lang.

生成配置文件 tsconfig.jsontsc --init编译ts—>js直接执行tsctsc修改tsconfig.json中的配置tsc使用npx生成tsconfig.jsonnpm install -g npxnpx tsconfig.json

安装tsnpm install -g typescript查看版本tsc --version相关命令tsctsc -wtsc-nodetsc-node-devnodemon tspconcurrently "tsc ..." "nodemon ..."编译ts—>jstsc filename.ts // filename为TypeScript文件名//tsc命令工具还可以同时编译多个ts文件，多个文件之间用逗号隔开tsc file1.ts.

let hName = "huangxiaoguo";hName = 'xiaoguo';console.log(hName)const username = "huangxiaoguo"//常量不可以修改（ts会报错）// username ='xiaoguo'/*******************************数据类型***************************/let age: number = 19// let age = 19//number类

安装less cnpm install less less-loader --save创建 config-overrides.jsconst { override, fixBabelImports, addLessLoader } = require('customize-cra');//针对antd实现按需打包module.exports = override( fixBabelImports('import', { libraryName: 'antd',.

安装 antdcnpm install antd --save安装依赖cnpm install react-app-rewired --savecnpm install customize-cra --savecnpm install babel-plugin-import --save创建 config-overrides.js修改 package.json "scripts": { "start": "react-scripts start", .

1. setStatesetState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2). setState(updater, [callb

安装react-reduxnpm install --save react-redux引入redux-thunk，用于支持异步actionnpm install --save redux-thunk引入redux-devtools-extensionnpm install redux-devtools-extensionsrc/index.js中使用Providerimport React from 'react'import ReactDOM from 'react-dom.

一、编程式路由导航push导航pushShow = (id,title)=>{ //push跳转+携带params参数 this.props.history.push(`/home/message/detail/${id}/${title}`) //push跳转+携带search参数 this.props.history.push(`/home/message/detail?id=${id}&title=${title}`) //push跳转+携带st

下载react-router-domnpm install --save react-router-domindex.js包裹Router//引入react核心库import React from 'react'//引入ReactDOMimport ReactDOM from 'react-dom'//import {BrowserRouter} from 'react-router-dom'//引入Appimport App from './App'ReactDOM.re.

一、向路由组件传递params参数render() { const {messageArr} = this.state return ( <div> <ul> { messageArr.map((msgObj)=>{ return (

NavLink与Link区别 1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名 {/* 在React中靠路由链接实现切换组件--编写路由链接 */}<NavLink activeClassName="huang" className="list-group-item" to="/about">About</NavLink><NavLink activeClassName="huang" className="list-gro.

安装cnpm install pubsub-js --save使用1) import PubSub from 'pubsub-js' //引入2) PubSub.subscribe('recever', function(data){ }); //订阅3) PubSub.publish('recever', data) //发布消息案例：定义两个组件组件Dog订阅消息import React, { Component } from 'react'import Pu.

const proxy = require('http-proxy-middleware')module.exports = function(app){ app.use( proxy('/api1',{ //遇见/api1前缀的请求，就会触发该代理配置 target:'https://www.fastmock.site/mock/f6273fce31c98c4d64fd82d91784712f/api', //请求转发给谁 changeOrigin:true,//控制服务器收到的请.

安装node.js下载地址：https://nodejs.org/zh-cn/download/直接进行安装，安装完成node.js后自动帮助完成npm的安装，查看是否完成可以到环境配置中查看。查看npmnpm -v安装淘宝镜像npm config set registry https://registry.npm.taobao.org在npm -v命令后显示npm安装完成时，即可安装淘宝镜像，后面的npm 可以改成cnpm执行命令配置后可通过下面方式来验证是否成功np.

一、高阶函数 高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。 1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。 2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。 常见的高阶函数有：Promise、setTimeout、arr.map()等等 函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。