weixin_58495461的博客

第一步：先下载redux的中间件npm i react-redux react -D第二步：在公共目录src下的index.js中进行路由与redux进行连接import {HashRouter as Router} from 'react-router-dom';import reportWebVitals from './reportWebVitals';import App from './App';//引入插件import {Provider} from "react-redux"

1.首先在node_modules中查找react-scripts文件2.找到react-scripts文件，点击config文件3.在config文件中找到webpack.confilg.js文件4.webpack.confilg.js文件中搜索alias5.在alias中添加修改代码 '@': path.resolve('src'),...

1.下载相关依赖cnpm i http-proxy-middleware --save -dev2、在src目录下新建 setupProxy.js 的文件3、然后在setupProxy.js写如下代码（2020-6-23日下载的版本）const { createProxyMiddleware } = require('http-proxy-middleware') module.exports = function (app) { app.use(createProxyMiddlewa

1.下载路由的核心中间件npm i react-router-config -snpm i react-router-dom -s2.在index.js文件中引入，并包裹App这个展示组件3.在App.js文件中引入路由中间件，然后配置一些代码3.1引入的中间件// 路由模块import {Link} from 'react-router-dom'//占位符相当于router-view，展示import {renderRoutes} from 'react-router-confi

1.首先先暴露项目配置npm run eject1.2如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，需要提交1.2.1git add . 提交所有项目git add .1.3git commit -m ‘文件名’ ,保存记录位置git commit -m 'init'1.4 npm run reject,继续暴露项目配置，这就是成功后的显示2.安装相关的依赖npm i lib-flexible --savenpm i postcss-px2r

1.在项目根目录配置一个config-overrides.js2.在config-overrides.js文件内写入const { override, fixBabelImports, addLessLoader, addPostcssPlugins } = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName: 'antd-mobile',

1.Ant Design Mobile这是官方文档https://mobile.ant.design/index-cn2安装antd-mobilenpm install antd-mobile --save3.按需加载3.1引入 react-app-rewired 并修改 package.json 里的启动配置。。由于新的 react-app-rewired@2.x 版本的关系，你需要还需要安装 customize-cra。npm install react-app-rewired cus

1.修改源查看源npm config get registry默认源npm config set registry https://registry.npmjs.org切换淘宝源npm config set registryhttps://registry.npm.taobao.org2.创建react项目npm install -g create-react-appcreate-react-app 项目名称3.在react中配置less安装lessnpm instal

1.首先先下载依赖npm i @types/axios -S2.在src文件夹下创建一个api的文件3.在api文件夹中创建两个.ts结尾的文件4.request.ts中的配置import axios from "axios";export const Service = axios.create({ timeout: 8000, //延迟时间 method: 'POST', headers: { "content-Type": "appl

1.在src下创建一个axios.d.ts的文件，并定义接口的类型// axios接口的处理import * as axios from 'axios'declare module 'axios' { interface AxiosInstance { (config: AxiosRequestConfig): Promise<any> }}2.重启项目后就可以用了...

1.tsx代码import { Component } from "react";import './Tab.less'interface Props {}interface user { id: string, text: string}interface content { id: string, text: string}interface State { ButtonIndex: number, ButtonArray: user[

1.tsx代码import React, { Component, createRef } from "react";import './Drag.less'interface Props {}interface State {}class Drag extends Component<Props, State>{ startX: number = 0 startY: number = 0 X: number = 0 Y: number = 0

1.先创建项目create-react-app 项目名称--template typescript2.剩下的就跟react配置是一样的，可以看一下我其他的文章

1.下载相关依赖npm install react-keeper -s2.App.js中的相关配置注释的位置是需要修改掉的路由解决返回页面时刷新的问题就是：看一下当前的页面是否缓存list就是我们要缓存的列表页 <HashRouter> <div> {/* list为我们要缓存的组件 */} <Route cache path="/list" component={() => &lt

全局声明一个变量 在constructor中this.Time=null在你的事件中加入如下代码clearTimeout(this.Time)this.Time=setTimeout(()=>{ console.log('正在输入中')//这边是用来写你的代码的},1500)如果报错可能是this指向的问题，在你的html代码中使用bind(this)改变this的指向...

1.在App.js中引入需要展示的组件2.在子组件中定义方法，触发diff算法import { Component } from 'react'export default class ContextContent extends Component { constructor(...args) { super(...args) this.state = { num: 0 } } fn() { this.setState({ n

js代码import { Component } from 'react'import './linkage.less'class Linkage extends Component { constructor(...args) { super(...args) this.state = { ButtonList: [], ContentList: [], // 下标

1.jsx代码import { Component } from "react";import '../component/list.less'import { searchCar } from '../api/index'import love from '../assets/爱心.gif';import load from '../assets/images(1)/loading.gif'import arrow from '../assets/search/左箭头.gif'import

React控制元素显示和隐藏的方法目前我知道的有三种方法：第一种是通过state变量来控制是否渲染元素，类似vue中的v-if。第二种是通过style控制display属性，类似vue 中的v-show。第三种是通过动态切换className。第一种方法是通过此例中showElem变量来控制是否加载元素的，如果showElem为false，内容是直接不会渲染的。class Demo extends React.Component{ constructor(props){ s