![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 50
小菜鸟学代码··
很帅很帅的机车博主
展开
-
react动态路由组件的封装
react动态路由组件的封装原创 2023-03-04 17:28:50 · 1082 阅读 · 0 评论 -
react 锚点tab链接
react 的锚点事件原创 2022-10-08 16:12:48 · 486 阅读 · 0 评论 -
react快速框架dva搭建项目架构
接下来就可以在对应的路由文件下写相应的页面 也可以封装一些ajax请求等等。最后一步在我们挂载的路由页面里面循环路由做一个动态路由。路由模块导出 这是路由数组文件统一管理。首先查看电脑里有没有全局安装dva。原创 2022-09-26 09:37:02 · 634 阅读 · 0 评论 -
react去除富文本标签的语法
react去除富文本标签小技巧原创 2022-08-31 11:29:17 · 397 阅读 · 0 评论 -
创建dva项目时报错Warning: Please use require(“history“).createHashHistory
react dva 进入警告history原创 2022-05-06 14:22:35 · 1156 阅读 · 4 评论 -
Dva初步使用
dva初步使用原创 2022-05-06 11:50:54 · 1016 阅读 · 0 评论 -
react父子组件传值
react父子组件传值首先父传子组件最原始的props获取父组件import React, { useRef, memo, useMemo, useCallback, useState } from 'react';import Add from "./page/add"export default function Home() { const paData = useRef('11') return ( <> <Add原创 2022-04-01 18:16:39 · 1180 阅读 · 1 评论 -
react新特性hooks开发
react新特性hooks开发react组件开发有两种形式一种是基于类的开发,一种是通过function+hooks开发hooks是可以让react在不使用类定义的时候,在使用方法也可以有状态的一种方式1.UseState注意:useState不能进行条件渲染不然就报错import './App.css';import React, { useState } from 'react' //首先引入useStateexport default function App() { co原创 2022-04-01 17:04:18 · 1083 阅读 · 0 评论 -
react路由传值的三种方式
react路由传值的三种方式1.parms 参数入口携带参数<Link to="/路由地址/路由参数Params"></Link><Link to="/home/Tom/18"></Link>出口获取声明接收参数<Route path="/home/:name/:age" component={Home}>接收参数(this.props.match.params)search参数入口携带参数<Link to="/路由地原创 2021-09-28 19:44:25 · 892 阅读 · 0 评论 -
react事件传递参数的两种方式
react事件传递参数的两种方式因为react不是跟vue一样直接在事件里面传递参数就可以 见下图这样你跟本就不需要点击他就立即执行了,所以如果要在事件里面传参我目前已知的有两种方法第一种通过bind强制绑定this注意:这里的话第一个参数必须是this因为这里有个隐式绑定this的缘故,bind默认的第一个参数是触发者本身的元素或者事件如果传入一个参数。那么接收的只有一个参数那么这个参数就是触发者的元素或者事件如果传入两个参数,接收一个参数,那么这个参数就是你传入的第二个参数(隐式原创 2021-09-24 17:28:36 · 3049 阅读 · 0 评论 -
reactUI组件库
reactUI组件库(Ant)1.1安装yarn add antd1.2导入在app.js中导入jsimport { Button } from 'antd';在index.js中导入cssimport 'antd/dist/antd.css'接下来就可以在所有的组件中使用Button组件了 <Button onClick={this.hanlde}>+1</Button>//具体属性看文档...原创 2021-09-16 19:12:35 · 231 阅读 · 0 评论 -
路由的基本使用
react路由的基本使用1.1安装$npm i react-router-dom -S 或者 yarn add react-router-dom1.2导入使用找到app.js文件import {BrowserRouter as Router,Route,Link} from 'react-router-dom'因为这里我将BrowserRouter组件取了个别名Router,使用router包裹整个应用export default class App extends Componen原创 2021-09-16 17:19:36 · 127 阅读 · 0 评论 -
render-props和高阶组件
render-props和高阶组件以上两种方式都是实现状态组件复用1.1 render props是一种模式使用render创建复用组件首先我们创建一个组件,这个组件里面有可以复用的方法和逻辑,下面我们写一个可以获取当前移动坐标的组件(mouse)import React, { Component } from 'react'export default class home extends Component { constructor(props) { super(pro原创 2021-09-07 17:30:54 · 373 阅读 · 0 评论 -
React生命周期
React生命周期钩子函数执行顺序 constructor => render =>componentDidMountconstructor在创建组件时最先执行,常用于初始化state为事件处理程序绑定thisrender每次组件渲染都会去执行,说白了就是渲染UI(注意在render里面不能使用setstate)不然就会报错不能在状态变化的时候进行更新 导致出这种错的原因是在使用setState的时候我们就会去触发render,而你在render里面去调用setState就会进行死循环原创 2021-08-31 19:50:32 · 247 阅读 · 0 评论 -
React的Props默认值
React的Props默认值简单来说props默认值使用场景比较少,但是也必须取了解首先父级组件我们可以很明显的看到父级组件没有传入pageSize属性打印的props但现在我想快速加一个默认值怎么办组件名.defaultPropshome.defaultProps={ pageSize:10}很明显这里是可以查到的,但是如果你有值,他就会去替代默认值...原创 2021-08-19 18:02:34 · 1109 阅读 · 0 评论 -
React组件props校验
React组件props校验首先说明以下为什么需要props校验,因为props是接受从父组件传过来得数据(接数据跟传数据不是一个人),但是数据类型没有明确得规定,那么有的时候我需要一个数组,你却给我普通数据,那么最终就会报错1.首先安装prop-typesyarn add prop-types 或者 npm i prop-types -g2.导入prop-types包import PropTypes from 'prop-types'3.最后一步使用组件名.propTypes={}给组原创 2021-08-18 19:48:06 · 624 阅读 · 0 评论 -
React跨组件传值
React跨组件传值React跨组件传值运用的是提供者与消费的概念来创建的 ,借助react中的对象context来实现,这个对象里面默认有个属性Provider,ConsumerProvider 是提供数据,一般写在入口组件,Consumer 是消费数据接下来是用法首先创建一个文件作为存储数据的仓库glabol.jsimport React from 'react'//导出对象 因为React.createContext()里面有两个属性Provider,Consumer所以需要导出ex原创 2021-08-18 11:36:18 · 1725 阅读 · 0 评论 -
react组件传值
react组件传值1.父子组件传值1.1父传子父组件import Asign from './view/asign'import './App.css';import React, { Component } from 'react'export default class App extends Component { state={ name:"jack", arr:['a', 'b', 'c'], fn:()=>{ console.log('原创 2021-08-16 19:31:52 · 242 阅读 · 0 评论 -
React渲染注意事项
React渲染注意事项首先React有两种渲染方式一种是通过函数方法的return返回出去,一种是通过类的render渲染组件//函数式渲染 常用于静态页面渲染import React from 'react' export default function asign() { return ( <div> </div> )}//类继承react渲染 常用动态渲染,因为在这里面可以保存状态import React, { C原创 2021-08-16 15:49:32 · 152 阅读 · 0 评论 -
React基础使用
React基础使用在Nodejs的环境下面,打开控制台,使用npm或yarn去安装脚手架$ npm install create-react-app -g或者$ yarn add create-react-app -gyarn常用命令$ yarn init # 初始项目$ yarn add # 安装某一个包$ yarn remove # 移除某一个包$ yarn /yarn install # 根据项目下面的package.json安装依赖创建项目$ create-原创 2021-04-05 15:41:35 · 112 阅读 · 0 评论 -
react引入less
react引入less如果使用sass的话直接yarn add sass-loader node-sass但是今天我想使用less怎么办呢首先下载yarn add less less-loader接下来就是配置了,看了很多博客都不能实现,心酸啊第一步:首先你得暴露你的webpack.config.jsyarn eject或者 npm run eject会生成两个文件夹第二部找到其中的webpack.config.js找到其中的sass配置const lessRegex原创 2021-03-30 19:52:50 · 1467 阅读 · 0 评论 -
React的跨域解决问题
React的跨域解决问题第一种方法在package.json中的本来的端口号在自己本身没有的路径请求全部都发送给了你代理的端口号,比如说你请求index.html 首页你自己是有的所以返回的是是自己的,当你请求index2.html 自己没有,所以还是发送给代理第二种方法不在package.json里面配置,在src 下面新建一个文件setupProxy.js 文件名不能改,因为React会自动查找配置setupProxy.jsconst proxy = require('http-原创 2021-02-04 23:23:45 · 747 阅读 · 0 评论 -
React基础用法
React基础脚手架安装npm install create-react-app安装完成以后,在控制台输入如下命令,验证是否安装成功create-react-app --version脚手架创建项目create-react-app 项目名称脚手架项目结果1.public是公开文件夹2.src目录是开发目录index.js是整个程序的启动目录,也是webpack的入口文件index.css是程序程序的公共CSS文件,如果需要写公共CSS文件最好写在这里App.js是根组原创 2020-10-23 16:10:09 · 838 阅读 · 0 评论 -
React生命周期函数
React生命周期函数(旧)class Count extends React.Component{ //构造器 constructor(props){ console.log(props) super(props) //初始化状态 this.state={count:0} } //加1按钮的回调 add=()=>{ //获取原状态 const {count}=this.state //更新状态 this.setState({count:count+1})原创 2021-01-18 22:39:12 · 133 阅读 · 0 评论