【03】的博客

解决方式1遗弃webpack5，将其改为和config-overrides.js2、下载相关依赖package.json3、修改启动方式方式2如果遇到错误，可删除package-lock.json和node_modules重试参考地址How to Polyfill node core modules in webpack 5https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-w

代码import React, {Component} from 'react';import FileViewer from 'react-file-viewer';export default class MyComponent extends Component { state = { fileLocalUrl: null, type: '' } changeFile(e) { let file = e.currentTa

关于setState官网说明 https://zh-hans.reactjs.org/docs/faq-state.html#what-does-setstate-dosetstate在原生事件，setTimeout,setInterval,promise等异步操作中，state会同步更新文档提到setState是异步的https://zh-hans.reactjs.org/docs/faq-state.html#when-is-setstate-asynchronous那再了解一下setState

具体而言，高阶组件是参数为组件，返回值为新组件的函数https://react.docschina.org/docs/higher-order-components.html这是一个最简易的类高阶组件Test2.jsx（父组件）import React, {Component} from 'react';import Child from './child'class Test2 extends Component { render() { return (

前言Decorator 是 ES7 的一个新语法，目前仍处于第2阶段提案中，正如其“装饰器”的叫法所表达的，他通过添加@方法名可以对一些对象进行装饰包装然后返回一个被包装过的对象，可以装饰的对象包括：类，属性，方法等。在使用它之前需要引入babel模块 编译成 ES5 或 ES6。1. 类的装饰当装饰的对象是类时，我们操作的就是这个类本身，即装饰器函数的第一个参数，就是所要装饰的目标类。@decoratorclass A {}// 等同于class A {}A = decorator(A

问题在使用 npx create-react-app react-app 的时候创建项目后没有src 文件夹，仅有node_modules、package.json、package-lock.json、yarn.lock文件解决经过查询，是因为官方已经弃用了独立安装包 create-react-app 这个 cli 脚手架，如果没有及时卸载 就会出现这个问题。所以，只要卸载重装是没有问题的。命令：卸载全局安装包npm uninstall -g create-react-app重装全局安装包

代码title: '直连网银\n单据直接驱动付款'<h1 className='title'>{title}</h1>显示为\n会被解析成空格解决给标签添加css样式属性即可.title{ white-space: pre-wrap;}

错误边界当一个页面包含N个组件时，其中一个组件报错，就会导致整个页面白屏，这并不是我们想要的ErrorPage.jsximport React, {Component} from 'react';import ErrorView from "./ErrorView";class ErrorPage extends Component { render() { return ( <div> <h1&gt

前言我们要满足的需求就是，封装axios的过程中，对于异常的处理，玩玩要调用某个组件让他提示错误信息（当然，在不会的情况下用alert是最明智的选择），现在，通过阅读本篇文章，可以在js中调用弹窗组件甭价弹窗组件是基于antd-mobal的modal组件再次封装https://mobile.ant.design/components/modal-cn/Dialog.jsximport React, { Component } from 'react';import ReactDOM from '

前言众所周知，react的css在默认情况下无论在哪个组件引用，都是全局的，后 覆盖 前(对于权重高的不覆盖，相当于css的书写顺序)准备react暴露配置文件react配置less-loader 配置antd-mobal按需引入在上面基础之上，解决以下问题1、实现全局css以及局部css2、局部css适配antd-mobal的按需引入webpack.config.js把之前配置less产生的部分代码恢复为const cssRegex = /\.css$/;const cssModu

基于封装好的路由封装过程详见https://web03.cn/blog/151asyncComponent.jsximport React,{Component} from 'react'export default function asyncComponent(importantComponent) { class AsyncComponent extends Component{ constructor(props){ super(props); this

暴露配置文件请查阅相关文章https://web03.cn/blog/152下载 babel-plugin-importnpm install babel-plugin-import --save-dev文档地址https://github.com/ant-design/babel-plugin-import修改package.json修改前 "babel": { "presets": [ "react-app" ] }修改后 "babel":

1、暴露配置文件请查阅相关文章https://web03.cn/blog/152下载loadernpm install less less-loader配置方案1（推荐）打开配置文件 webpack.config.js// const cssRegex = /\.css$/;//修改前const cssRegex = /\.css|less$/;//修改后新增代码{ loader: require.resolve('less-loader')},修改代码// excl

开局先挂官方文档https://react.docschina.org/docs/portals.html实现全局弹出层App.jsimport React from 'react';import './App.css';import Mask from './Portals/Mask'class App extends React.Component { constructor(props){ super(props); this.state = { show

使用react-redux1.下载 reduxnpm install --save redux2.下载react-redux简化redux操作npm install --save react-redux3.下载redux-thunk实现redux异步npm install --save redux-thunk实现一个简单的同步，异步，组件状态的更新action.js/* 包含所有 action creator*/export const addCount = (number)

学过vue的话，对插槽并不陌生，react的插槽和vue的有几分类似举例1-匿名插槽Father.jsximport React,{Component, Suspense} from 'react'import Children from './Children'export default class Father extends Component{ constructor(props){ super(props) this.state={

前言Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。简单的说，就是在组件定义context，组件内的内部组件 子孙所有组件都可以访问这个数据写法1，