React
文章平均质量分 90
React学习和使用中遇到的问题和值的记录的要点。
DxCaesar
这个作者很懒,什么都没留下…
展开
-
http-proxy-middleware报错“proxy is not a function“
http-proxy-middleware报错"proxy is not a function"近期重新搭建了一个react脚手架项目,因为是前后端分离开发的,所以前后端的交互因为端口不同而产生跨域,过去通常是使用配置http-proxy-middleware中间间来处理跨域,在src目录下新建setupProxy.js文件,并写入以下代码,即可实现跨域:const proxy = require('http-proxy-middleware')module.exports = function (原创 2020-11-09 10:14:08 · 896 阅读 · 0 评论 -
React-redux的使用
1. 安装npm install react-redux -S2. 使用redux-建立目录结构参照redux的使用方法,建立reducers, actions和store使用Provider传递store在index.js中使用<Provider>最外层组件包住,并传递storeimport React from 'react'import { rend...原创 2020-02-12 13:07:33 · 134 阅读 · 0 评论 -
Redux的使用
0. Redux的安装npm install --save redux1. Redux的目录结构srcactionsreducersstore.js2. Redux的使用2.1 引入redux和reducers在src/store.js下引入redux和reducersimport { createStore } from 'redux'import roo...原创 2020-02-12 13:05:19 · 111 阅读 · 0 评论 -
使用BrowserRouter白屏问题
问题描述 使用BrowserRouter建立路由,开发过程中没有问题,但是build后放到tomcat中导致白屏,没有渲染组件,也没有404。 如果使用HashRouter的话没有问题,但是强迫症表示不好看。。。环境:使用create-react-app脚手架搭建的react环境后台使用spring-boot问题原因 首先分析下出现此问题的原因: 在React项目中我们经常...原创 2020-02-12 13:02:34 · 1968 阅读 · 0 评论 -
vscode 引用路径的别名设置
问题描述 在开发过程中,由于模块越来越多,需要建立的文件夹就会越来越多,目录层级越来越深。这样就会导致import引用时极不方便,比如说: 如果在开发过程中能够使用某别名来指代根目录或src文件夹(开发过程中引用的文件一般都在src下),达到下图的效果,是最好不过的了(程序员一般都是有强迫症的,可能要达到目的写的代码要远远大于这几个.,虽然可以达到目的,但是太难看了)。解决过程更...原创 2020-02-12 12:58:01 · 5121 阅读 · 0 评论 -
Antd的使用
antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。特性提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量 React 组件。使用 TypeScript 构建,提供完整的类型定义文件。全链路开发和设计工具体系。安装npm install antd --save使用1. 一般引用方式(不推荐)import B...原创 2020-02-12 12:50:47 · 1392 阅读 · 0 评论 -
React Router的使用
1. 安装react router有多个版本的包,在web应用使用的是react-router-domnpm install react-router-dom --save2. 使用2.0 准备在src\index.js中引入router,并在最外层组件套用Router即可(Router只需要引用一次)import React from 'react'import { render...原创 2020-02-12 12:44:59 · 246 阅读 · 0 评论 -
常用的向后台发送请求的方式
1. Ajax兼容性一般,成功率最低!2. img兼容性最好,成功率较高使用img发送请求并附带参数const img = new Image()img.src='http://.../button-01.gif?x=1&y=2'当点击某个button时,向后端发送某个img的请求(gif格式的图片较小),并传递一些参数,后端就可以获取参数并进行处理。处理结束后根据状态返...原创 2020-02-12 12:31:36 · 525 阅读 · 0 评论 -
React高阶组件(HOC)的修饰器使用
为了使HOC暴露出来时好管理并提高可读性,可以使用react-app-rewired+customize-cra进行配置1.安装react-app-rewirednpm install react-app-rewired --save-devract-app-rewired用于允许实现react的可配置,而不使用eject2.在package.json里面把scripts里的r...原创 2020-02-12 12:27:05 · 261 阅读 · 0 评论 -
React 推荐插件(库)
classNames: css管理插件import classNames from 'classNames'styled-components: 组件样式const Title = styles.h1` color:#F00`//新建组件<Title>样式</Title>prop-types: 检查组件传入的prop属性的类型检查传入的prop变...原创 2020-02-12 12:25:03 · 842 阅读 · 0 评论 -
React阻止默认事件
在 React 中你 不能 通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault()。//阻止链接默认打开一个新页面function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); }...原创 2020-02-12 12:23:17 · 1498 阅读 · 0 评论 -
React的state和setState()方法
1.不要直接修改 Stateeg:例如,此代码不会重新渲染组件:// Wrongthis.state.comment = 'Hello';而是应该使用 setState():// Correctthis.setState({comment: 'Hello'});构造函数是唯一可以给 this.state 赋值的地方2.State 的更新可能是异步的出于性能考虑,React...原创 2020-02-12 12:21:36 · 167 阅读 · 0 评论 -
React生命周期函数
componentDidMount()componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行请求一般在此方法中发送componentWillUnmount()componentWillUnmount() 方法会在组件被删除时运行(删除前)componentDidUpdate()componentDidUpdate() 会在更新后 会被立即调用。首次渲染不会执...原创 2020-02-12 12:19:38 · 76 阅读 · 0 评论 -
在项目中使用React
1. 使用script标签添加:<!-- 加载 React。--><!-- 注意: 部署时,将 "development.js" 替换为 "production.min.js"。--><script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></scri...原创 2020-02-12 12:14:07 · 212 阅读 · 0 评论 -
使用脚手架搭建一个React-App
1.一个React App需要安装的包(1) Reactnpx create-react-app app-name(2) 支持高阶组件等@装饰器react-app-rewirednpm install react-app-rewired --save-devcustomize-cranpm install customize-cra --save-dev@babel/plu...原创 2020-02-12 12:07:42 · 186 阅读 · 0 评论