qq_60403325的博客

实现非受控组件子组件传递数据到父组件 用自定义事件父组件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..

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...

UseCallBack 子组件与父组件的数据不联动 手动更新子组件父组件import React, { useState } from 'react'import Child3 from '../components/Child3'export default function UseCallBack() { const [num, setnum] = useState(10) return ( <div> {num}..

useSelector 取出全局的数据useDispatch 使用全局的方法引入import { useSelector, useDispatch } from "react-redux"取出全局的数据 const list = useSelector((state: any) => state.userinfo.list)全局的方法 const dispatch = useDispatch()使用全局的方法引入全局的方法import { a..

实现跨层级的组件通信在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.

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.

useEffect 可以实现三个生命周期 和实现 数据监听watch三个生命周期页面结构加载完成 componentDidMount(）页面离开销毁 componentwillUnmount()页面更新完成 和 数据监听 componentDidUpdate()页面结构加载完成 在这里写数据请求 const [num, setnum] = useState(100) useEffect(() => { //页面结构加载完成 ...

rfc 创建函数组件引入import React, { useState, useEffect } from 'react'声明数据 和 修改数据的方法 只能通过这个方法修改数据const [num, setNum] = useState(100);//num为变量 setNum为变量的修改方法 100为初始值 num只能被setNum修改 const [username, setUsername] = useState("");使用声明的数据和方法 {num} ..

在redux中异步请求怎么写写在action文件夹中下载中间件 npm iredux-thunk在 store文件夹中引入import { createStore, combineReducers, applyMiddleware } from "redux"import thunk from "redux-thunk"并且导出export default createStore(store, applyMiddleware(thunk))完整的import { ..

怎么使用全局的数据和方法首先rcr方法要引入 并且注册在mapDispatchToProps中 使用的话是 this.props.方法名数据的话要在mapStateToProps 中取出来 使用的话是this.props.listconst mapStateToProps = (state: any) => ({ list: state.userinfo.list})import React, { Component } from '...

终极reduxnpm ireact-redux1，main.tsx引入import { Provider } from "react-redux"import store from "./store"改写ReactDom.render( <Provider store={store}> <App></App> </Provider> , document.getElementById("..

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 +

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&.

用户菜单管理理解下用户菜单 是用户被分配到的菜单 菜单列表是所有的菜单userMenu.tsx1，在这个页面需要分配菜单给每个用户在分配之前也就是增加用户菜单权限的时候需要先删除用用户菜单的权限在进行新增不然就会出现重复的菜单权限注意 let exitlit = this.state.usermenulist//用户存在的菜单 删除的是这个已经存在的用户菜单 let item = selctlist[i] //选中的菜单集合 怎加的是选中的菜单列表...

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

登录页面根据接口userModel.query() 登录并且跳转到menu页面menu页面是父页面 所有增加的页面是在menu这一个页面进行跳转menu页面1，根据userid获取到usermenuinfos里面的数据 async componentDidMount() { let userinfo: any = window.localStorage.getItem("userinfo"); if (userinfo) { ..

json-server模拟数据 数据格式如下{ "userinfos": [ { "id": 1, "username": "lesson", "userpwd": "123", "usertype": 1 }, { "username": "huyan", "userpwd": "123", "usertype": 2, "id": 2 }, { .

使用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

1，新建三个页面login.tsx 登录页面reg.tsx 注册页面userinfo.tsx 个人信息页面2，全部引入到mine页面中去 并配好路由注意let loginInfo = window.localStorage.getItem("userinfo");//获取localStorage的值需要放在render函数中 子组件在父组件中进行互相跳转 不会触发constructor这个生命周期的函数 只会触发rendr函数 所以需要放在render函数中 进行...

父组件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

对传过来的数据进行约束interface Iprops { //对传过来的数据进行约束 del: (id: number) => void list: Array<usertable>}对自己的数据进行约束interface Istate { list: Array<usertable>, username: string, userpwd: string}写数据请求分步骤 写一个表的约束 这个表的服务.

比如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..

路由的跳转方式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

在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...

constructor(){} 接受数据 声明数据和方法render()渲染页面componentDidMount() 页面结构加载完成 这里可以写数据请求componentDidUpdate(){} 页面更新完成componentwillUnmount(){} 组件离开页面打开会执行constructor(){} render(){} componentDidMount(){}这几个生命周期函数执行了this.setState({}) 会执行render(){} c...

npm run build然后在package.json中配置 "homepage": "."

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"]

生产者也就是在远程电脑上的所有东西开发者是在本地的开发配置axios.jsimport axios from "axios";axios.defaults.baseURL = process.env.REACT_APP_URL;//请求的拦截axios.interceptors.request.use(config => { // 在发送请求之前做些什么 if (window.localStorage.getItem("token")) { con

子与子的通信找一个共同的父组件进行传递也就是一个字传父和父传子的组合子组件的代码Child7import React from 'react'export default function Child7({ list }) { return ( <div> {list.map((item, index) => { return <button key={index}>{item}&

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.

父组件 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

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: /^[.

接口文件axiosimport axios from "axios"axios.defaults.baseURL = "http://localhost:2345"export default axiosModelimport axios from "./axios"export default { query: (params) => { return axios({ method: "get",

父传子的组件通信在父组件中的代码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