React
周家大小姐.
这个作者很懒,什么都没留下…
展开
-
React 安装路由(router)及使用
安装路由npm i react-router-dom路由引入可以在两个地方引入1.index.js2.app.js我这里选择app.js引入引入路由之后一// 如果觉得 BrowserRouter 名字太长可以用{BrowserRouter as Router} 后面可以用Router替代// import {BrowserRouter} from 'rea...原创 2021-06-15 19:22:32 · 948 阅读 · 0 评论 -
react+loadsh 取数组中关联最多的id
const {id} = maxBy(graphData.nodes.map(({id})=>({ id:id,value: filter(graphData.edges, ({source,target})=>source===id||target===id).length})), 'value')原创 2021-06-04 21:40:49 · 113 阅读 · 1 评论 -
react +loadsh取数值中的交集
// 取设备的交集 function getRootId({ nodes, edges }) { let deviceNode = filter(({ label }) => label === "device"); const deepList = sortBy( deviceNode.map(({ id }) => { const ids = uniq( edg...原创 2021-06-04 21:39:16 · 196 阅读 · 0 评论 -
react+mobx class类型转成store类型
ReviewStore.jsimport { decorate, observable, action, computed } from "mobx";class ReviewStore { reviewList = [ { review: "This is a nice article", stars: 2 }, { review: "A lovely review", stars: 3 }, ]; // @action addReview(e) { th原创 2021-05-24 23:35:10 · 329 阅读 · 0 评论 -
react 无状态组件使用mobx中的注入依赖@inject
import React from 'react'import { observer, inject } from "mobx-react"//'TodoListStore', 'BirdStore'定义的store名const Fun = inject('TodoListStore', 'BirdStore')(observer((props) => { return ( <div>{ props.TodoListStore.firstTodo }</div&g.原创 2021-05-24 22:02:42 · 1611 阅读 · 0 评论 -
react useRef 缓存使用
import React, { useRef, useState } from "react";export default () => { // 初始值为空,ref const prefv = useRef(null); console.log("pre", prefv); const [counter, setCounter] = useState(0); return ( <div> <p>当前的值:{counter}<.原创 2021-05-22 14:40:19 · 1047 阅读 · 0 评论 -
react+hooks使用,useState,useEffect,useReducer
Hooks是一项新功能提案,可让您在不编写类的情况下使用 state(状态) 和其他 React 功能。它们目前处于 React v16.7.0-alpha 中,并在一个开放RFC中进行讨论useState使用import React, { useState } from "react";export default () => { //useState(0) 初始值,通过setCount去改变 const [count, setCount] = useStat...原创 2021-05-22 13:22:35 · 312 阅读 · 0 评论 -
dva-loading 使用
安装npm install dva-loading --savesrc/index.jsimport dva from 'dva';import './index.css';import { createBrowserHistory as createHistory } from 'history';import createLoading from 'dva-loading';// 1. Initializeconst app = dva({ history: creat.原创 2021-05-16 17:58:47 · 1076 阅读 · 0 评论 -
dva redux-actions定义多个type
npm install --sava redux-actions创建一个文件actions.jsimport { createAction } from 'redux-actions';export const counterAdd = createAction('counter/add');export const counterAsyncAdd = createAction('counter/asyncAdd');父组件传给子组件使用import React from 're.原创 2021-05-16 13:28:54 · 218 阅读 · 0 评论 -
dva 两种路由跳转方式
普通跳转及父子组件方式跳转用history 方式const CounterPage = ({ history }) => { return ( <div> <p>Counter</p> <Counter dispatch={ dispatch } /> </div> )}Counter.propTypes = { counter: PropTypes.object.原创 2021-05-16 12:45:31 · 908 阅读 · 0 评论 -
react+dva 父组件使用子组件
子组件import React from 'react'import { Modal, Form, Input } from 'antd';class index extends React.Component { state = { visible: false, title: '', id: null }; // 显示模态框 showModal = (title, record, id) => { this.setState({原创 2021-05-09 16:27:00 · 478 阅读 · 0 评论 -
react+dva+axios接口封装
前提:安装axioscnpm install axios --save安装qs序列化cnpm install qssrc\utils\request.js文件中写入封装方法/** * 封装通用的工具函数 ajax请求 */import axios from 'axios'import qs from 'qs'// 设置请求的服务器根路径axios.defaults.baseURL = 'http://127.0.0.1:8088'// 封装get和post请求.原创 2021-05-09 15:16:31 · 502 阅读 · 0 评论 -
dvaJs indexjs文件同时加载多个models实例
在models文件中创建一个modules文件所有的js都放在里面在models文件下的index.js中const context = require.context("./modules", false, /\.js$/);// export default context// .keys()// .filter((item) => item !== "./index.js")// .map((key) => context(key));export d原创 2021-05-05 15:57:34 · 656 阅读 · 0 评论 -
react dva 使用models存储
数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过dispatch发起一个 action,如果是同步行为会直接通过Reducers改变State,如果是异步行为(副作用)会先触发Effects然后流向Reducers最终改变State,所以在 dva 中,数据流向非常清晰简明,并且思路基本跟开源社区保持一致(也是来自于开源社区)。global.js// 管理状态export default { namespa...原创 2021-05-05 14:23:16 · 784 阅读 · 0 评论 -
react 使用models中的dispatch报错
Unhandled Rejection (TypeError): _this.props.dispatch is not a function解决方法引入dva中connect方法import { connect } from "dva";@connect(() => ({}))class Login extends Component {}export default Login;原创 2021-05-02 19:18:15 · 1110 阅读 · 1 评论 -
react 刷新Uncaught SyntaxError: Unexpected token ‘<‘
react 刷新Uncaught SyntaxError: Unexpected token '<'在二级路由下跳转,页面一刷新就白屏f12下会报令牌错误处理方法:找到public/index.html页面在脚本上src前加上"/"<scriptsrc="index.js"></script>再次刷新页面成功渲染...原创 2021-04-29 19:53:56 · 3580 阅读 · 1 评论 -
react 去掉地址栏的#号
下载插件cnpm i history --save在根路径下的index.js文件下引入并使用import { createBrowserHistory } from 'history';// 1. Initialize// const app = dva();// 1. Initialize 实例化const app = dva({ history: createBrowserHistory(),});发现二级路由跳转的时候会报错Unhandled Rejec原创 2021-04-29 19:46:15 · 959 阅读 · 0 评论 -
react 路由动态传参Link
仓库地址https://gitee.com/zhouyunfang/react-vita/blob/master/client/src/components/profile/Profile.jshtml //比如:profile.handle=text<Link to={`/profile/${profile.handle}`} className="btn btn-info...原创 2020-02-09 16:47:43 · 985 阅读 · 0 评论 -
es6 (解构赋值)复制对象中指定的对象属性值
将剩余数组赋值给一个变量当解构一个数组时,可以使用剩余模式,将数组剩余部分赋值给一个变量。var [a, ...b] = [1, 2, 3];console.log(a); // 1console.log(b); // [2, 3]注意:如果剩余元素右侧有逗号,会抛出 SyntaxError,因为剩余元素必须是数组的最后一个元素。var [a, ...b,] = [1...原创 2020-02-06 22:34:13 · 10451 阅读 · 0 评论 -
react 路由封装及页面授权
我所参考的博客src下建一个router.jsimport Landing from './components/layout/Landing'import Login from './components/auth/Login'import Register from './components/auth/Register'import Dashboard from './com...原创 2020-02-04 21:50:41 · 1181 阅读 · 0 评论 -
react+antdesign async promise 解决地域回调问题
需求:必须第一个执行完毕后才能走第二个;没有用到resolve是因为axios本身就是promise的封装所以这里不需要没有使用promise的情况 componentDidMount() { // 传入当前用户的角色id Service.loadUserRoles(this.props.data.id).then(res => { ...原创 2020-01-04 20:49:43 · 644 阅读 · 0 评论 -
react+antdesign 用promise all对所有返回数据做个统一提示
仓库地址:https://gitee.com/zhouyunfang/react-admin/blob/master/src/View/Admin/UserMgr/SetRole.js例:一个增加一个删除,两个都是在提示的时候进行aixos,我们可以分别在then之后使用message但是如果用到promise的方法可以做到优化,看代码 // 确定提交 handleSub...原创 2020-01-04 20:33:16 · 1907 阅读 · 0 评论 -
vue map 修改后台返回的指定值
map则可以改变当前循环的值,返回一个新的被改变过值之后的数组(map需return),一般用来处理需要修改某一个数组的值。...item,第一个参数做为初始值,...{}第二个参数为要修改的值,最后会和...item合并,如果第一个参数中没有这个值,会做为新参数追加进去,如果有则会修改并返回 queryList(params).then(res => { t...原创 2019-12-31 16:59:30 · 1634 阅读 · 0 评论 -
react、redux、react-redux之间的区别
redux:创建一个window.store=createStore(reducer),然后在需要的地方通过store.getState()去获取数据,通过store.dispatch去更新数据,通过store.subscribe去订阅数据变化然后进行setState...如果很多地方都这样做一遍,实在是不堪其重,而且,还是没有避免掉全局变量的不优雅。react-redux:由于...转载 2019-12-29 14:56:44 · 680 阅读 · 0 评论 -
react+antdesign 表格删除失败
官网地址https://ant.design/components/table-cn/#components-table-demo-dynamic-settings错误写法:一开始会删除成功;再第二步的时候会删除失败;你会发现state中的数据就算你在确认删除后并清空数组,也跟本没有变化 // 删除 handleDelte = () => { ...原创 2019-12-23 22:02:18 · 474 阅读 · 0 评论 -
react+dva+ant 路由报错
Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.解决方法:报警告的内容大致意思就是props需要通过函数返回而不是对象。 {/* 一级路由 Switch路由需要用到的容器 */} <Switch&g...原创 2019-12-08 19:41:27 · 262 阅读 · 0 评论 -
react 引入scss报错 Uncaught Error: Module build failed: TypeError: this.getResolve is not a function
解决方法在package.json中修改sass-loader把版本改到8以下就可以npm installnpm start原创 2019-12-08 17:32:16 · 979 阅读 · 0 评论 -
react打包后线上访问项目此请求已被阻止;内容必须通过HTTPS提供。
postActions.js:7 Mixed Content: The page at 'https://zhouyunfang.github.io/react-redux/index.html' was loaded over HTTPS, but requested an insecure resource 'http://jsonplaceholder.typicode.com/posts'...原创 2019-12-08 14:30:29 · 2472 阅读 · 1 评论 -
react 打包后找不到路径
在 package.json文件中配置相对路径新增"homepage":"."原创 2019-12-08 14:24:46 · 1199 阅读 · 0 评论 -
react 安装redux及使用
目录demo仓库地址https://gitee.com/zhouyunfang/react-redux-demo安装reducerreducer的拆分demo仓库地址https://gitee.com/zhouyunfang/react-redux-demo安装reducer安装命令cnpm i redux --save react-redux re...原创 2019-12-07 20:25:27 · 949 阅读 · 0 评论 -
react 生命周期和组件生命周期
目录可分成三个状态生命周期的方法可分成三个状态Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM生命周期的方法 componentWillMount在渲染前调用,在客户端也在服务端。 componentDidMount: 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通...原创 2019-12-05 17:04:34 · 124 阅读 · 0 评论 -
react 点击报错修改this指向问题
方法一,在实例中bind修改this指向class Toggle extends React.Component { constructor(props) { super(props); // 这边绑定是必要的,这样 `this` 才能在回调函数中使用 this.handleClick = this.handleClick.bind(this); } ...原创 2019-12-05 15:47:43 · 338 阅读 · 0 评论 -
react 双向数据绑定
子组件/** * 双向绑定 * */import React from 'react';const person = (props) => { return ( <div> <p > 我是{props.name}我有{props.count}个xx</p> {/* ...原创 2019-12-04 22:40:28 · 177 阅读 · 0 评论 -
react 子组件事件传递
子组件:import React from 'react';const person = (props) => { return ( <div> {/* myClick 定义点击事件 */} <p onClick={props.myClick}> 我是{props.name}我有{prop...原创 2019-12-04 22:20:25 · 631 阅读 · 0 评论 -
React 安装路由(router)及使用
项目地址:https://gitee.com/zhouyunfang/react-project安装路由:npm i react-router-dom引入路由:路由可以在index.js或都app.js引入都可以;我在app.js中引入引入之后一定要重启项目// 如果觉得 BrowserRouter 名字太长可以用{BrowserRouter as Router} ...原创 2019-03-26 01:53:20 · 3381 阅读 · 0 评论 -
Redux 安装及使用(获取请求数据)
仓库代码:https://gitee.com/zhouyunfang/react-redux.git如果想要在react中使用状态统一管理就要使用redux什么时候需要用到redux?某个组件的状态,需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态发生上面情况时,如果不使用 Redux 或者其他状态管理工具,不按...原创 2019-03-25 16:46:47 · 1072 阅读 · 1 评论 -
React form表单fetch提交数据
import React, { Component } from 'react'class PostFrom extends Component { constructor(props) { super(props) this.state = { title: '', body: '' }...原创 2019-03-25 15:05:53 · 4653 阅读 · 0 评论 -
React 绑定点击事件和change事件
onSubmit:为点击事件,改变this事件onChange:为关联触发事件import React, { Component } from 'react'class PostFrom extends Component { constructor(props) { super(props) this.state = { ...原创 2019-03-25 14:46:30 · 4933 阅读 · 0 评论 -
React 安装
create-react-app [file]npm start运行npm run build打包原创 2019-03-25 13:50:27 · 95 阅读 · 0 评论 -
React 生命周期
React 生命周期分为三种状态 (针对有状态组件)容器:所有生命周期都写class类 Component中;import React, { Component } from 'react'export default class Footer extends Component { constructor(props){ super(props) this.s...原创 2019-03-24 22:38:14 · 110 阅读 · 0 评论