![](https://img-blog.csdnimg.cn/76c2503b78c84186ae686f2524479f94.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 50
react相关
我们都是柠檬精诶
哈 哈哈 哈哈哈 哈哈哈哈
展开
-
antdPro编辑表格(EditableProTable)线上校验出错样式异常
antdPro编辑表格(EditableProTable)线上校验出错样式异常原创 2022-09-20 15:15:01 · 1504 阅读 · 0 评论 -
react的createContext()和useContext()
react的上下文原创 2022-05-30 14:28:08 · 376 阅读 · 0 评论 -
react 超一行展示省略号并且当鼠标悬浮时展示文本全部内容
Demo:title 就是展示鼠标悬浮的内容,当title的值为undefined时 titile 不展示。import { isExceed } from '@/utils/utils';.....<div className="col-item-value" title={isExceed(props.value, 28)}> {props.value} </div>....需要分成两步:Step1:css部分超一行展示省略号.col-item-原创 2022-04-22 11:53:11 · 2221 阅读 · 0 评论 -
react的createContext()和useContext()
(1)当组件上层最近的 <MyContext.Provider> 更新时,该 Hook 会触发重渲染,并使用最新传递给 MyContext provider 的 context value 值。(2)即使祖先使用 React.memo 或 shouldComponentUpdate,也会在组件本身使用 useContext 时重新渲染。(3)useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用 &.原创 2022-03-25 15:14:32 · 2046 阅读 · 0 评论 -
react的useImperativeHandle()和forwardRef()
一、useImperativeHandle()useImperativeHandle(ref, createHandle, [deps])useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下,应当避免使用 ref这样的命令式代码。 useImperativeHandle 应当与 forwardRef 一起使用。function FancyInput(props, ref) { const inputRef = useRef();原创 2022-03-25 15:09:56 · 2396 阅读 · 0 评论 -
react 导入 react-router-dom引入Switch报 ‘Switch‘ is not exported from ‘react-router-dom‘
react-router-dom从V5升级到V6后,有些使用做了一些改变:(1) Switch 重命名为 Routes// v5<Switch> <Route exact path="/"><Home /></Route> <Route path="/profile"><Profile /></Route></Switch>// v6<Routes> <R.原创 2021-12-01 17:32:27 · 11601 阅读 · 4 评论 -
ant design 的组件 Select 的 placeholder不生效
value: 指定当前选中的条目,多选时为一个数组。(value 数组引用未变化时,Select 不会更新)// 当select的value绑定一个默认值时,如果默认值是' '或null时,placeholder也是不生效的,// 你需要将默认值设为 undefined 才可以<Select ... // value 指定当前选中的条目,多选时为一个数组。(value 数组引用未变化时,Select 不会更新) value={item.value ? item.v原创 2021-11-04 09:40:54 · 593 阅读 · 0 评论 -
React+TS引入antd
在 TypeScript 中使用 React 和 Antd安装和初始化使用 yarn 创建 cra-template-typescript 项目yarn create react-app antd-demo-ts --template typescriptornpx create-react-app my-app --template typescript如果你使用的是 npm(接下来我们都会用 yarn 作为例子,如果你习惯用 npm 也没问题)。npx create-react-app原创 2021-10-17 20:00:25 · 1667 阅读 · 0 评论 -
React路由传参的三种方式
方式 一:通过params1.路由表中 2.Link处HTML方式<Link to={ ’ /sort/ ’ + ’ 2 ’ } activeClassName=‘active’>XXXX JS方式this.props.history.push( ‘/sort/’+‘2’ ) 3.sort页面通过 this.props.match.params.id 就可以接受到传递过来的原创 2021-09-28 15:42:17 · 450 阅读 · 0 评论 -
react跑马灯插件react-slick使用
传送门 react-slick想实现类似这种样式的跑马灯注意:使用npm下载的时候会要求你得jquery,typescript的版本有要求,需要下载符合条件的版本,否则会下载不下来。代码:import Slider from "react-slick";import "slick-carousel/slick/slick.css";import "slick-carousel/slick/slick-theme.css";... // 跑马灯插件设置const settings = {原创 2021-09-24 15:11:34 · 7795 阅读 · 2 评论 -
React 的生命周期
React 的生命周期图1、getDefaultPropsobject getDefaultProps()执行过一次后,被创建的类会有缓存,映射的值会存在 this.props ,前提是这个 prop 不是父组件指定的这个方法在对象被创建之前执行,因此不能在方法内调用 this.props ,另外,注意任何getDefaultProps()返回的对象在实例中共享,不是复制2、getInitialStateobject getInitialState()控件加载之前执行,返回值会被用于stat原创 2021-07-13 11:05:08 · 159 阅读 · 0 评论 -
react 后台管理页面引入动态路由(react-router-dom)
1、动态路由数据源import { UserOutlined, VideoCameraOutlined, AppstoreOutlined } from "@ant-design/icons";const menuList = [{ key: 'sub1', title: '首页', icon: <UserOutlined />, path: '/homePage', sourcePath: 'views/homePage', childre.原创 2021-07-06 17:07:38 · 6421 阅读 · 2 评论 -
react 配置@根路径
1、执行命令npm run eject npm run eject 命令无法撤销执行后,会出现config 和scripts 两个文件夹2、找到暴露的config 下的 webpack.config.js 文件,在alias插入:'@': path.resolve('src'), alias: { '@': path.resolve('src'), // Support React Native Web // https://www.s原创 2021-07-06 14:37:26 · 916 阅读 · 0 评论 -
在 React 中使用 echarts-for-react / react ,如,柱状图,折线图,饼图
111原创 2021-07-01 17:20:08 · 3492 阅读 · 0 评论 -
引入less 报错: this.getOptions is not a function
问题:less-loader 的版本过高,不兼容 getOptions 函数方法,所以需要对 less-loader 进行降级处理。(1)卸载原版本npm uninstall less-loader(2)重新安装旧版本yarn add less-loader@6.0.0原创 2021-06-28 14:13:31 · 2654 阅读 · 0 评论 -
在react项目中使用less
1.首先安装less和less-loader:npm install less less-loader --save-dev2.还需要在webpack中进行配置:运行 npm run eject,运行完毕后项目中会多出一个 config 的文件夹找到 webpck.config.js,大约50行的位置添加 less代码:// 新加lessconst lessRegex = /\.less$/const lessModuleRegex = /\.module\.less$/然后在module原创 2021-06-28 11:42:15 · 923 阅读 · 0 评论 -
使用 create-react-app + react-router-dom + axios + antd + react-redux 构建 React 项目(2)
当你跟着步骤(1)步走完之后,你会发现这里的项目文件类型都是js,而实际的开发过程中都是jsx文件。或许你会开始产生疑问,什么是jsx?为什么要用jsx格式而不用js格式?如何改用jsx格式?什么是 jsx?传送门JSX是一个 JavaScript 的语法扩展。react官方建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。React 不强制要求使用 JSX,但是大.原创 2021-06-25 15:56:28 · 181 阅读 · 0 评论 -
使用 create-react-app + react-router-dom + axios + antd + react-redux 构建 React 项目(1)
1、安装、构建 复制代码全局安装npm install -g create-react-app构建一个my-app的项目npx create-react-app my-appcd my-app启动编译当前的React项目,并自动打开 http://localhost:3000/npm start2、项目目录// 默认的├── package.json├── public # 这个是webpack的配置的静态目录│ ├── favicon.i原创 2021-06-24 21:16:14 · 465 阅读 · 0 评论 -
react 点击事件传参
方法1<button onClick={(e)=> this.deleteRow( id, e )}>方法1</button>方法2<button onClick={ this.deleteRow.bind( this, id)}>方法2</button>上述两种方式是等价的。上面两个例子中,参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式,事件对象必须显式的进行传递,但是通过 bind 的方式,事件对原创 2021-06-16 18:11:35 · 2727 阅读 · 0 评论 -
react 的 state 与 props
一、state 与 props1、区别: state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。props:用于子组件传递数据;state :用于容器组件更新和修改数据;2、使用:(1)props 的使用 在组件中使用 props。function HelloMessage(props) { return <h1&原创 2021-06-16 17:00:03 · 219 阅读 · 0 评论 -
认识 react 的组件及其事件注册
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、React 中的组件1、函数组件2、类组件二、事件注册1.“函数组件”注册点击事件2.“类组件”注册点击事件(1) 在构造函数中绑定 this(2) 使用“属性初始化器语法”绑定 this(3) 回调函数中使用“箭头函数”绑定 this(4) 总结前言原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头,比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组原创 2021-06-16 16:46:25 · 371 阅读 · 0 评论 -
react 的生命周期
新版:旧版:原创 2021-06-01 09:37:02 · 54 阅读 · 0 评论 -
Hook 的 useEffect( fun , Array )
// watch 相当于vue的watch方法,会监听Array里面的值的变化,并进行更新。 useEffect(() => { requestList(); }, [pagination, mode, cname]);原创 2021-05-28 18:22:47 · 94 阅读 · 0 评论 -
使用react脚手架搭建项目,提示“create-react-app不是内部或外部命令,也不是可运行的程序”的解决办法
使用脚手架搭建react项目的流程:// 1、全局安装 create-react-app 如图1npm install -g create-react-app// 2、用create-react-app 创建项目目录create-react-app XXX // xxx 是你的文件名,注意要小写图一:当你进行到第2步的时候,你可能会出现这个问题,“create-react-app 不是内部或外部命令,也不是可运行的程序”我是通过这个命令解决的。npx create-react-app XX原创 2021-05-28 14:29:11 · 886 阅读 · 0 评论 -
react 的 jsx 语法规则
标题jsx 语法规则<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title { background-color: rgba(207, 19, 91, 0.589); width: 200p原创 2021-05-25 18:10:32 · 210 阅读 · 0 评论