react
关注
分享
扫一扫
xiaocuizao
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
React this.refs.dom与ReactDOM.findDOMNode使用与区别
1.this.refs.name获取dom节点的DOMNodehandleSubmit = () => { let name = this.refs.name.value, // 获取DOMnode content = this.refs.content.value, publishTime = this.refs.publishTime.va...转载 2019-11-28 22:36:38 · 729 阅读 · 0 评论 -
React项目报警告 Can't perform a React state update on an unmounted component
我们不能在组件销毁后设置state，防止出现内存泄漏的情况分析出现问题的原因：我在componentDidMount里面运用了setState更新数据，然后频繁的切换到其他的页面,，此时组件已经销毁了，还在进行setState就会有警告；解决方法：componentWillUnmount(){ this.setState = (state, callback) =>{ retu...原创 2019-11-04 22:11:45 · 1616 阅读 · 0 评论 -
错误锦集--react路由
写东西一定要过脑啊在写跳转路由时，一定要写跟目录下 <NavLink to='/mine/login'>登录</NavLink> <NavLink to='/mine/register'>注册</NavLink>错误的写法:不小心加了.,这样 <NavLink...原创 2019-08-20 21:56:37 · 250 阅读 · 0 评论 -
React二级路由的实现
首先考虑二级路由在哪里展示，他们的展示在对应的一级路由的组件内，所以先找到一级路由对应的pages页以登录和注册为例,在我们的里面实现二级路由（登录注册）二级路由的展示有俩种形式：①：通过一个开关切换俩个不同的组件import React, { Component } from 'react'import { Route } from 'react-router-dom'impor...原创 2019-08-20 23:23:02 · 10311 阅读 · 5 评论 -
react 组件通信
①跨组件通信参考 ：https://www.cnblogs.com/mengff/p/9511419.html通过React.createContextconst MyContext = React.createContext(defaultValue);下面是例子import React, { Component } from 'react'const MyContext = Re...原创 2019-08-21 09:09:13 · 103 阅读 · 0 评论 -
react 编程式导航
路由跳转，replace / push 区别 push: a-b-c 可以回到上一级 this.props.history.push('路由地址') replace: a-b-c 回不到上一级 适用于登录后，不需要重新回到登页面this.props.history.replace('路由地址')他们的跳转效果是一样的。但是当点击浏览器的后退按钮时，由于replace没有历史记录，不能直...原创 2019-08-21 09:28:51 · 2792 阅读 · 0 评论 -
react--动态路由
路由传参路由接参案例：分类=》列表》详情首先配置组件库：Ant Design 不在是Ui布局，样式布局以组件的形式呈现的，目前是react的核心组件框架https://ant.design/index-cn在首页的底端有下列的资源相关资源：Ant Design Pro pc端Ant Design Mobile 移动端Ant Design 可以获取当前最新版本An...原创 2019-08-21 14:14:45 · 197 阅读 · 0 评论 -
在react中webpact配置找不到以及npm run eject 报错
我们在项目中肯定需要进行webpack配置，有俩种方案，一是将webpack.config.js抽离出来，另一种是在根目录下创建webpack.config.js文件，（注意：在react中我们是很难找到webpack.config.js文件的，如果想要看结构，可以构建一个demo的react项目，进行抽离，因为npm run eject的过程是不可逆的）当我们进行抽离的时候可能会发现如下错误...原创 2019-09-05 22:01:30 · 521 阅读 · 0 评论 -
redux的应用
https://www.jianshu.com/p/21960f78937dhttps://segmentfault.com/a/1190000015684895https://blog.youkuaiyun.com/qq_40963664/article/details/79526829原创 2019-09-15 22:06:35 · 248 阅读 · 0 评论 -
react-router与react、react-dom的版本问题
react-router@3.0.0版本对应的react,react-dom的版本为15.3.0react-router-dom 的版本对应的react 、react-dom是最新版本16.9.0原创 2019-09-16 12:23:40 · 5139 阅读 · 0 评论 -
React-redux框架之connect()与Provider组件 用法讲解
https://www.jianshu.com/p/81e9e9eaf8fa原创 2019-09-17 11:45:02 · 158 阅读 · 0 评论 -
移动端layoput页面
import React, { Component } from 'react'import { Switch, Route, Redirect, withRouter } from 'react-router-dom'import { LayoutContainer } from './LayoutStyledComp'import Mask from './mask'impor...原创 2019-09-18 19:49:05 · 137 阅读 · 0 评论 -
react里面的跨域
反向代理在src目录下建一个文件setupProxy.js(注意:这里是写死的，必须是在src目录下面)在package.json里面也可以通过第三方模块http-proxy-middleware注意：在书写params时，引号’'里面不要有空格,这样会导致请求的数据有误，const proxy = require (‘http-proxy-middleware’)；module.ex...原创 2019-08-20 21:28:35 · 490 阅读 · 0 评论 -
错误锦集--styled-components样式的书写
a{ list-style:none; display:flex; flex-direction:column; text-decoration:none; color:#000; font-si...原创 2019-08-20 20:52:34 · 284 阅读 · 0 评论 -
图标库fontawesome的问题
注意：第一步 ：点击DownLoad下载文件，放到将用到的css和fonts文件放到public下面官当文档 ⭐ 在第二部的引用的css文件href不对，在BootCDN中查找第三步也就没什么好说的，照着引入就好了使用 CSS①复制 font-awesome 目录到你的项目中 ②在<head>处加载font-awesome.min.css如下。③<link rel=...原创 2019-08-19 22:00:42 · 516 阅读 · 0 评论 -
react中的样式书写的几种形式
第一种：也是嘴常用的一种 利用第三方插件styled-components首先安装：cnpm i styled-components -Simport styled from 'styled-components'; const HeadContainer = styled.header`在这里写样式 width: 100%; height: .505rem backgro...原创 2019-08-20 09:10:35 · 2004 阅读 · 0 评论 -
super(props) ，super() 以及不写super的区别
super(props)------super()-----以及不写super的区别如果你用到了constructor就必须写super(),是用来初始化this的，可以绑定事件到this上;如果你在constructor中要使用this.props,就必须给super加参数：super(props)；（无论有没有constructor，在render中this.props都是可以使用的，这...原创 2019-08-15 10:27:50 · 540 阅读 · 0 评论 -
react 的路由
要想写路由，我们首先要在入口文件(index.js)引入BrowserRouter在index.js里面 import { BrowserRouter as Router } from ‘react-router-dom’,注意 ：上面的是新的形式的写法，我们知道react路由的写法有俩种： 还有老的写法Hashrouter 它是用location.hash+hashchange事件B...原创 2019-08-20 16:01:53 · 179 阅读 · 0 评论 -
react的性能优化
优化1：无状态组件的应用原创 2019-08-15 14:11:36 · 158 阅读 · 0 评论 -
react中Fragment组件
在我们定义组件的时候return里最外层包裹的div往往不想渲染到页面，那么就要用到我们的Fragment组件了在我们定义组件的时候，return返回需要唯一根元素，所以我们经常会写一个div来包裹，，如果我们不想渲染这个div，减少dom渲染，就可以引用Fragment组件import React, { Component, **Fragment** } from 'react';clas...原创 2019-08-24 13:01:41 · 417 阅读 · 0 评论 -
privder组件 与Router组件，App组件之间的包含关系
在入口文件index.js中，引入Provider与Router组件时的包含关系ReactDOM.render( <Provider> <Router> <App /> </Router> </Provider> , document.getElementB...原创 2019-08-24 13:06:52 · 353 阅读 · 0 评论 -
Can’t resolve ‘redux’
来源：https://whatibroke.com/2018/05/10/module-not-found-cant-resolve-redux-in-cusersfrontendsrcfrontendnode_modulesreact-reduxesconnect/方法已经试过，很好用Hi everyone,Another quick one. I’d installed react-re...转载 2019-08-24 14:22:36 · 4704 阅读 · 1 评论 -
React组件
React组件的介绍组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石。在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。所谓无状态组件，就是没有状态控制的组件，只做纯静态展示的作用，无状态组件是最基本的组件形式，它由属性props和渲染函数render构成。由于不涉及到状态的更新，所以这种...原创 2019-08-15 15:41:46 · 114 阅读 · 0 评论 -
react 中特殊属性的书写
在jsx语法中 ，在书写像是class这样的属性时，因为是在js里书写，我们知道在js中class是关键字，所以react定义了className来代替 ，同样的表单中的value也是关键字，用defaultValue代替...原创 2019-08-15 15:51:38 · 275 阅读 · 0 评论 -
标签中active激活状态属性样式的书写
不废话了，直接例子 a{ list-style:none; display:flex; flex-direction:column; text-decoration:none; color:#000; ⭐...原创 2019-08-20 20:00:17 · 4092 阅读 · 0 评论 -
修改react项目的默认端口
"scripts": { "start": "** ⭐set PORT=9000 &&⭐**react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },在package....原创 2019-08-19 21:24:41 · 187 阅读 · 0 评论