react
介绍及采坑react
风舞红枫
被磨平棱角的前端小伙
展开
-
使用react-router-middleware-plus后无法使用路由懒加载
使用react-router-middleware-plus后无法使用路由懒加载解决办法原创 2023-03-10 14:54:06 · 196 阅读 · 0 评论 -
react18中使用react-hook-form
react-hook-form使用记录原创 2022-09-12 16:14:38 · 892 阅读 · 0 评论 -
xterm + WebSocket 实现 CLI
【代码】xterm + WebSocket 实现 CLI。原创 2022-09-12 11:50:26 · 799 阅读 · 0 评论 -
antd起步及采坑
antd官网通过脚手架创建react项目之后安装npm install antd --savenpm install babel-plugin-import less less-loader --save-dev修改config/jest/webpack.config.js中的1.sass替换成less 修改后npm install降级less2.plugins数组中添加["import", { "libraryName":"antd", style:true}]修改pack.j原创 2021-02-22 17:24:07 · 288 阅读 · 2 评论 -
react之router
目录路由安装声明式导航自定义导航 必须路由对象路由router 文档安装npm install react-router-domBrowerserRouter //histroy 路由HashRouter //hash 路由Link 地址栏改变NavLik 地址栏改变Route 根据地址栏变化渲染组件Redirect 重定向(一定要放在Switch中)Switch 只匹配一个exact 精确匹配 完全匹配组件分类1.类组件class App extends Component原创 2021-02-22 17:20:04 · 116 阅读 · 0 评论 -
react之redux全局状态管理
npm install redux --save-dev项目目录src store action.js reducer.js state.js store.js App.js components son.jsAPP.jsimport React, { Component } from 'react';import Son from './components/son';import store from './store/store'import action原创 2021-02-22 17:15:51 · 319 阅读 · 2 评论 -
react生命周期解读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc原创 2021-02-22 17:12:20 · 147 阅读 · 2 评论 -
react中的传值示例
react props传值示例通过SonTwo点击事件触发Father中valindexChange方法(需要将方法传递到子组件中)valindexChange(){}触发后调用setState({})来更新组件状态将最新的state值传递给SonOne。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte原创 2021-02-22 17:10:55 · 186 阅读 · 0 评论 -
react项目搭建
目录react 脚手架工具1、创建项目2、抽离配置文件3、給项目添加@,代替src目录,类似于vue中的@4、安装项目必须的依赖5、修改项目的文件结构6、路由6.1布局 src/layout6.2 src/router/index.js 依据布局设置路由6.3 设定App布局下的路由---- 首页、分类、购物车、我的 ---- 重定向6.4 设定UserApp布局下的路由---- 登录、注册6.5 设定DetailApp布局下的路由---- 详情6.6 设置个页面布局6.7 编程式导航和声明式导航6.8 设原创 2021-02-22 17:06:25 · 601 阅读 · 2 评论