react
用于构建用户界面的 JavaScript 库
小周sir的码农
面对过去,不要迷离;面对未来,不必彷徨;活在今天,你只要把自己完全“展示”给别人看。
展开
-
使用redux-persist解决redux数据刷新丢失问题
在React项目实际开发中,我们常常会对一些数据进行存储缓存中,防止用户刷新浏览器,数据丢失问题,比如token,用户信息之类的。之前都是手写一遍localStorage和sessionStorage储存,接来下,我们通过一个插件redux-persist配置项,来存储数据。存储数据配置首先安装 redux-persist插件cnpm install redux-persiststore文件配置本地存储 import storage from 'redux-persist/lib/st.原创 2021-07-04 18:54:10 · 1513 阅读 · 0 评论 -
React中使用react-i18next切换中英文
在React中,使用react-i18next和i18next切换中英文Store文件数据初始化首先安装redux依赖包通过redux对数据状态管理,通过派发changeLanguageActionCreator来切换中英文状态export const CHANGE_LANGUAGE = "change_language";export const changeLanguageActionCreator = (languageCode) => { return {原创 2021-07-03 16:28:50 · 2010 阅读 · 0 评论 -
React配置路径别名
在react中,都是组件化开发,大部分都会import 组件名 from './../../组件路径,这样写太臃肿和不美观,可以通过配置来改变这个写法通过安装customize-cra插件来实现在根目录新建config-overrides.jsconst { override, addWebpackAlias} = require('customize-cra')const path = require('path')module.exports = override( //原创 2021-06-24 16:07:32 · 633 阅读 · 0 评论 -
React组件实现权限按钮显示和隐藏
在一些管理后台中,经常会编写权限这一块功能模块,通过调用后端返回的接口,匹备权限码来控制显示和隐藏,按钮权限控制显示和隐藏需要和后端沟通好,通过给用户分配权限(权限码),通过接口的形式,后端返回权限码存储到redux中。编辑高级组件role_button:存储到redux的权限码button 按钮级别传的权限码import React, { Component,Fragment } from 'react'import PropTypes from 'prop-types';impo原创 2021-06-04 22:40:09 · 2562 阅读 · 1 评论 -
Redux DevTools浏览器插件调试redux两种方法
通过科学上网的方式,在谷歌商店安装Redux DevTools方法一安装插件完之后,在你的redux文件,添加如下代码,reducer忽略即可const store = createStore( reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() );如果你安装了redux-thunk了使用applyMiddleware,修改如下首先需要在red原创 2021-05-26 22:06:27 · 496 阅读 · 0 评论 -
react结合antd动态生成左侧菜单栏
antd专门为react定制的中后台组件库,提供了大量的组件供开发者使用,官网地址 点击跳转在中后台中,菜单项是必不可少的,今天就使用react结合antd配置一个菜单栏目先定义好路由结构const Router = [{ title: '控制台', icon: 'laptop', key: '/index', role: ["user", "information", "product"] }, {原创 2021-04-14 19:43:42 · 3944 阅读 · 4 评论 -
react实现文字展开和收起功能
无论是在PC端页面还是WAP端页面,很常见的页面效果,超长文字,隐藏,然后点击展开和收齐功能。通过React Hook提供的useState定义好状态,来点击切换展开和收起id,name,image,info,price从父组件传递的数据info.substring(0,200)先对文本内容截取通过对按钮绑定点击事件,去触发useState里面的setReadMore去改变readMore的状态,即可实现这个功能通过三目运算符 readMore ? info : `${info.substri.原创 2021-04-01 22:35:52 · 2886 阅读 · 3 评论 -
React中Hook使用案例
React Hooks是React生态圈里边最火的新特性了。它改变了原始的React类的开发方式,改用了函数形式,通过一个小案例,理解对react hook的认知安装react脚手架create-react-app react-hook创建一个组件FileSearch在组件中引入react hook apiimport React, { useState, useEffect} fr...原创 2020-02-25 16:28:14 · 3876 阅读 · 2 评论 -
React-Router入门使用
React Router 是一个基于React之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与URL间的同步。React路由跳转制作一个平常一样的点击切换路由效果,首先需要安装cnpm install react-router-dom创建一个根目录AppRouter.js,并仰引入react-router-dom,在创建两个js组件import React, ...原创 2020-02-18 22:12:13 · 230 阅读 · 0 评论 -
React入门实例
准备开始好好学习react这个框架,每天积累一些知识React环境搭建在你终端中全局安装reactcnpm install -g create-react-app最终效果创建React项目create-react-app reactDemo //用脚手架创建React项目cd reactDemo //等创建完成后,进入项目目录yarn start //预览项目,如果...原创 2020-02-15 10:46:57 · 304 阅读 · 0 评论