- 博客(39)
- 收藏
- 关注
RSS订阅原创 数据处理。数据处理
找到三级节点getLeafKeys(node,arr){if(!node.childern){return arr.push(node.id)}//递归找到深层次的节点node.children.forEach(item=>{this.getLeafKeys(item,arr)})}
2021-12-11 14:21:20
136
原创 Hook UseRef
实现非受控组件子组件传递数据到父组件 用自定义事件父组件import React, { useState } from 'react'import Child4 from '../components/Child4'import Child5 from '../components/Child5'export default function UseRef() { const [username, setnum] = useState("") let fn = (m..
2021-09-24 19:50:10
152
原创 Hook UseMemo
UseMemo 可以实现计算属性只有goodsprice 和goodsnum改动了就会触发UseMemo引入import React, { useMemo, useState } from 'react'import React, { useMemo, useState } from 'react'export default function UseMeno() { const [num, setnum] = useState(10) const [goo...
2021-09-24 19:46:28
158
原创 Hook UseCallBack
UseCallBack 子组件与父组件的数据不联动 手动更新子组件父组件import React, { useState } from 'react'import Child3 from '../components/Child3'export default function UseCallBack() { const [num, setnum] = useState(10) return ( <div> {num}..
2021-09-24 19:43:08
151
原创 Hook 使用全局的方法和数据
useSelector 取出全局的数据useDispatch 使用全局的方法引入import { useSelector, useDispatch } from "react-redux"取出全局的数据 const list = useSelector((state: any) => state.userinfo.list)全局的方法 const dispatch = useDispatch()使用全局的方法引入全局的方法import { a..
2021-09-24 19:35:54
246
原创 Hook useContext
实现跨层级的组件通信在src中新建文件夹context 新建文件index.tsx里面写入import React from "react";export default React.createContext(10)爷组件引入import NumContext from "../context"import React, { Component } from 'react'import Child1 from '../components/Child1'impor.
2021-09-23 20:16:18
70
原创 useState与useEffect小试牛刀
import React, { useState, useEffect } from 'react'import userModel from '../model/userModel'export default function Test4() { const [list, setlist] = useState([]) const [key, setkey] = useState("") useEffect(() => { userModel.quer.
2021-09-23 19:42:59
108
原创 Hook useEffect
useEffect 可以实现三个生命周期 和实现 数据监听watch三个生命周期页面结构加载完成 componentDidMount(）页面离开销毁 componentwillUnmount()页面更新完成 和 数据监听 componentDidUpdate()页面结构加载完成 在这里写数据请求 const [num, setnum] = useState(100) useEffect(() => { //页面结构加载完成 ...
2021-09-23 19:39:44
816
原创 Hook useState
rfc 创建函数组件引入import React, { useState, useEffect } from 'react'声明数据 和 修改数据的方法 只能通过这个方法修改数据const [num, setNum] = useState(100);//num为变量 setNum为变量的修改方法 100为初始值 num只能被setNum修改 const [username, setUsername] = useState("");使用声明的数据和方法 {num} ..
2021-09-23 19:28:30
64
原创 redux 学习四
在redux中异步请求怎么写写在action文件夹中下载中间件 npm iredux-thunk在 store文件夹中引入import { createStore, combineReducers, applyMiddleware } from "redux"import thunk from "redux-thunk"并且导出export default createStore(store, applyMiddleware(thunk))完整的import { ..
2021-09-23 19:22:34
115
原创 redux 学习三
怎么使用全局的数据和方法首先rcr方法要引入 并且注册在mapDispatchToProps中 使用的话是 this.props.方法名数据的话要在mapStateToProps 中取出来 使用的话是this.props.listconst mapStateToProps = (state: any) => ({ list: state.userinfo.list})import React, { Component } from '...
2021-09-23 15:24:05
105
原创 redux学习二
终极reduxnpm ireact-redux1，main.tsx引入import { Provider } from "react-redux"import store from "./store"改写ReactDom.render( <Provider store={store}> <App></App> </Provider> , document.getElementById("..
2021-09-22 20:52:26
185
原创 redux学习一
npm i redux在src新建store文件夹写入index.tsx 并配置代码import { createStore } from "redux"2let numReducer = (state = { num: 10 }, action: any) => { console.log(action) switch (action.type) { case "add": return { num: state.num +
2021-09-22 13:51:43
84
原创 Vue导航守卫
参考博客园cvue-router 导航守卫 - JSkolo_yyds - 博客园1，全局前置守卫写法为router.beforeEach( ( to,from,next)=>{ } ) 进入每个路由之前都会经过这里 写法为router.beforeEach( (https://www.cnblogs.com/hu-yan-123/p/15170123.html1，全局前置守卫写法为router.beforeEach( ( to,from,next)=>{ } ) 进入每个路由之前都会...
2021-09-21 09:31:11
66
原创 Vue路由
1，动态路由匹配const User = { template: '<div>User</div>'}const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ]})一个“路径参数”使用冒号:标记。当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。2..
2021-09-21 09:25:22
92
原创 Vue生命周期
beforeCreate（） 表示vue开始被调用 了 data还没有全部接受created () 表示vue调用成功 可以获取到里面的data 可以写ajax请求beforeMount() 表示页面结构加载完成之前mounted（） 表示同步页面结构加载完成 操作原生的DOM事件 可以写ajax请求beforeUpdate() 数据更新之前updated () 数据更新之后beforeDestroy() 页面离开之前d...
2021-09-21 09:01:09
158
原创 vue组件通讯
父传子：参数='’参数'' <my-header :ischeckall="ischeckAll"></my-header>“ischeckAll” 是父组件的数据 :ischeckall是子组件的接受的参数子组件接受参数的方式 ：注意不放在data中 是放在data外面 props:["ischeckall"],子传父@自定义事件=“自定义事件”父组件“自定义事件” 是父组件的事件 @自定义事件 是子组件用来接收的事件 并...
2021-09-21 08:46:39
83
原创 react+tsx 菜单权限学习六
userMenu.tsximport React, { Component } from 'react'import usermodel from "../model/userModel"import menuModel from "../model/menuModel"import usermenuModel from "../model/usermenuService"export default class UserMenu extends Component<any, any&.
2021-09-20 17:38:48
337
原创 react+tsx菜单权限学习五
用户菜单管理理解下用户菜单 是用户被分配到的菜单 菜单列表是所有的菜单userMenu.tsx1，在这个页面需要分配菜单给每个用户在分配之前也就是增加用户菜单权限的时候需要先删除用用户菜单的权限在进行新增不然就会出现重复的菜单权限注意 let exitlit = this.state.usermenulist//用户存在的菜单 删除的是这个已经存在的用户菜单 let item = selctlist[i] //选中的菜单集合 怎加的是选中的菜单列表...
2021-09-20 17:34:27
249
原创 react+tsx菜单权限学习四
user.tsx 新建用户import React, { Component } from 'react'import userModel from "../model/userModel"export default class User extends Component<any, any> { constructor(props: any) { super(props) this.state = { usernam
2021-09-20 17:10:37
263
原创 react+ts 菜单权限学习三
登录页面根据接口userModel.query() 登录并且跳转到menu页面menu页面是父页面 所有增加的页面是在menu这一个页面进行跳转menu页面1，根据userid获取到usermenuinfos里面的数据 async componentDidMount() { let userinfo: any = window.localStorage.getItem("userinfo"); if (userinfo) { ..
2021-09-20 17:07:16
526
原创 react+ts菜单权限学习一
json-server模拟数据 数据格式如下{ "userinfos": [ { "id": 1, "username": "lesson", "userpwd": "123", "usertype": 1 }, { "username": "huyan", "userpwd": "123", "usertype": 2, "id": 2 }, { .
2021-09-20 16:52:09
2256
原创 react+ts菜单权限学习二
使用json-server模拟数据Model层用户接口userModelimport axios from "./axios"import Iusertable from "../inreface/usertable"import { AxiosPromise } from "axios"import Iuserserveice from "./Iuserserveice"class userModel implements Iuserserveice { query(p
2021-09-20 16:49:22
125
原创 二级路由之登录成功之后返回看见的是个人信息页面
1，新建三个页面login.tsx 登录页面reg.tsx 注册页面userinfo.tsx 个人信息页面2，全部引入到mine页面中去 并配好路由注意let loginInfo = window.localStorage.getItem("userinfo");//获取localStorage的值需要放在render函数中 子组件在父组件中进行互相跳转 不会触发constructor这个生命周期的函数 只会触发rendr函数 所以需要放在render函数中 进行...
2021-09-20 16:43:27
166
原创 ts+react写用户列表二
父组件User.tsximport React, { Component } from 'react'import usertable from "../interface/Iusertable"import userModel from "../model/userModel"import List from "../components/user/list"import Add from "../components/user/add"interface Iprops {}inte
2021-09-17 22:03:17
178
原创 用ts+react写用户列表一
对传过来的数据进行约束interface Iprops { //对传过来的数据进行约束 del: (id: number) => void list: Array<usertable>}对自己的数据进行约束interface Istate { list: Array<usertable>, username: string, userpwd: string}写数据请求分步骤 写一个表的约束 这个表的服务.
2021-09-17 21:58:21
182
原创 react配置二级路由
比如mine组件 login组件 reg组件mine组件路由的配置在router中的index里面import mine from "../views/mine" { id: 8, path: "/mine", component: mine }login 组件和reg组件 的路由配置在mine页面中注意 一定要写写exact 严格模式 只匹配 “/mine/” 这个路由import React, { Compon..
2021-09-17 21:44:26
2773
原创 react路由的跳转
路由的跳转方式this.props.history.push("/test1")路由的配置import test1 from "../views/test1" { id: 5, path: "/test1", component: test1 },路由的跳转是有带参数的跳转 this.props.history.push("/test2/9999")路由的配置import test2 from "../vie
2021-09-17 21:38:18
215
原创 react路由
在ts模式下需要先下载npm i@types/react-router-domnpm ireact-router-dom一般的路由写法在app.tsx页面配置引入import { HashRouter as Router, Route, Switch, Redirect } from "react-router-dom"引入组件import Home from "../views/Home"import User from "../views/User"i...
2021-09-17 20:46:37
107
原创 react生命周期
constructor(){} 接受数据 声明数据和方法render()渲染页面componentDidMount() 页面结构加载完成 这里可以写数据请求componentDidUpdate(){} 页面更新完成componentwillUnmount(){} 组件离开页面打开会执行constructor(){} render(){} componentDidMount(){}这几个生命周期函数执行了this.setState({}) 会执行render(){} c...
2021-09-16 19:57:52
84
原创 react配置反向代理
axios.js配置import axios from "axios";// axios.defaults.baseURL = process.env.REACT_APP_URL;//请求的拦截axios.interceptors.request.use(config => { // 在发送请求之前做些什么 if (window.localStorage.getItem("token")) { config.headers.common["token"]
2021-09-16 19:42:29
133
原创 react配置生产者和开发者
生产者也就是在远程电脑上的所有东西开发者是在本地的开发配置axios.jsimport axios from "axios";axios.defaults.baseURL = process.env.REACT_APP_URL;//请求的拦截axios.interceptors.request.use(config => { // 在发送请求之前做些什么 if (window.localStorage.getItem("token")) { con
2021-09-16 19:12:54
258
原创 用户列表新增删除
接口文件axiosimport axios from "axios"axios.defaults.baseURL = "http://localhost:2345"export default axiosModelimport axios from "./axios"export default { query: (params) => { return axios({ method: "get",
2021-09-16 15:33:47
106
原创 表单用户名和密码的验证
import React, { Component } from 'react'export default class Form extends Component { constructor(props) { super(props); this.state = { username: { value: "", tip: "请输入数字字母_$组成不能以数字开头长度6到10位", className: "error", reg: /^[.
2021-09-16 12:58:47
616
原创 用react写购物车组件分离版
父组件 fenshoppingcar.jsimport React, { Component } from 'react'import Header from "../components/header"import Content from "../components/content"import Footer from "../components/footer"import black from "../css/black.module.css"export default clas
2021-09-16 09:35:46
121
原创 用react写购物车
import React, { Component } from 'react'import black from "../css/black.module.css"export default class shoppingcar extends Component { constructor(props) { super(props) this.state = { checkedall: false, theme.
2021-09-16 09:29:26
304
原创 react的组件通信二
子与子的通信找一个共同的父组件进行传递也就是一个字传父和父传子的组合子组件的代码Child7import React from 'react'export default function Child7({ list }) { return ( <div> {list.map((item, index) => { return <button key={index}>{item}&
2021-09-15 21:09:11
55
原创 react的组件通信一
父传子的组件通信在父组件中的代码import React, { Component } from 'react'import Child1 from "../components/Child1";import Child2 from '../components/Child2';import Child3 from '../components/Child3';export default class Menu3 extends Component { constructor(pr
2021-09-15 20:54:08
95
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人