react
react相关
Tanjc518
这个作者很懒,什么都没留下…
展开
-
react键盘组件
【代码】react键盘组件。原创 2023-06-15 14:04:36 · 261 阅读 · 0 评论 -
react生命周期
React生命周期生命周期:就是指一个对象的生老病死。 React的生命周期指从组件被创建到销毁的过程。掌握了组件的生命周期,就可以在适当的时候去做一些事情。React生命周期可以分成三个阶段:1、实例化(挂载阶段):对象创建到完全渲染2、存在期(更新期):组件状态的改变3、销毁/清除期:组件使用完毕后,或者不需要存在与页面中,那么将组件移除,执行销毁。3.1、实例化/挂载阶段constructor()componentWillMount()render()componentDidMo原创 2020-05-24 16:12:09 · 581 阅读 · 0 评论 -
react配置路由
react配置路由首先安装路由npm install --save react-router-dom新建一个文件 routes下面新建index.jsimport { Switch, Route } from 'react-router-dom'import HomePage from '../pages/HomePage/HomePage'import TheNew from '../pages/TheNew/TheNew'import ApiServ from '../pages/ApiSe原创 2020-12-29 12:40:19 · 242 阅读 · 0 评论 -
react路由报错elements are for router configuration only and should not be rendered site:stackoverflow.co
我是因为使用了import { Switch } from 'react-router-dom'import { Route } from 'react-router'import HomePage from './HomePage'const routes = [ { path: '/homepage', component: HomePage, exact: true },]const routeConfig = () => { re原创 2020-12-29 00:14:52 · 244 阅读 · 0 评论 -
React 路由
React 路由根据不同的路径,显示不同的组件(内容);React使用的库react-router-dom;安装cnpm install react-router-dom --saveReactRouter三大组件:Router:所有路由组件的根组件(底层组件),包裹路由规则的最外层容器。属性:basename->设置跟此路由根路径,router可以在1个组件中写多个。Route:路由规则匹配组件,显示当前规则对应的组件Link:路由跳转的组件注意:如果要精确匹配,那么可以在rout原创 2020-05-25 01:07:20 · 504 阅读 · 0 评论 -
react定义bus事件(实现vue的$bus非父子传值)
定义bus事件 挂载到window创建utils/bus.js文件// a shim for bindif (typeof Function.prototype.bind !== "function") { Function.prototype.bind = function (bind) { var self = this; return function () { var args = Array.prototype.slice.call(argum原创 2022-05-04 17:14:47 · 410 阅读 · 0 评论 -
react生成二维码
react生成二维码import React, { Component } from 'react'import QRCode from 'qrcode-react'export default class qrCode extends Component { constructor(props) { super(props); this.state = { qrCode: `二维码链接`, }; } downloadCode = () =>原创 2021-01-28 10:19:19 · 192 阅读 · 0 评论 -
react使用createContext
Home.js文件import React, { useState , createContext } from 'react';import List from './List'//===关键代码 不同组件导出export const CountContext = createContext()function Home(){ const [ count , setCount ] = useState(0); return ( <div>原创 2021-11-08 15:19:11 · 457 阅读 · 0 评论 -
使用react 高阶组件withRouter
使用react 高阶组件withRouterwithRouter 是一个高阶组件,把 match,location,history 三个对象注入到组件的 props 中。这是一个非常实用的函数react中经过路由渲染的组件才拥有路由参数,使用this.props.history.push(’/a’)跳转到对应路由的页面一般都是使用withRouter函数调用import React, { Component } from 'react'import { withRouter } from 'rea原创 2020-12-29 22:02:56 · 490 阅读 · 0 评论 -
安装react脚手架
一、安装Node环境1.1、安装nodeJs.exenode -v (10.15.0)npm -v (6.4.1)1.2、安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org优点:1、国内服务器,速度更快2、淘宝镜像,支持使用“本地缓存”安装环境1.3、安装lesscnpm i less -g...原创 2021-01-25 16:03:06 · 2973 阅读 · 0 评论 -
react项目配置绝对路径
react项目配置决定路径解包npm run eject 或者 yarn eject在webpack.config.js文件alias对象配置 pages: path.join(__dirname, '../src/', 'pages'), assets: path.join(__dirname, '../src/', 'assets'), components: path.join(__dirname, '../src/', 'componen原创 2021-01-03 21:33:03 · 1169 阅读 · 0 评论