![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
弥玥
这个作者很懒,什么都没留下…
展开
-
关于SVG图片鼠标变为小手
当鼠标停在svg图片上时,鼠标指针变成小手:原创 2019-10-14 11:31:59 · 1027 阅读 · 0 评论 -
React focus鼠标指针变成手指
通过行内样式,给style一个样式style={{ cursor: "pointer" }}原创 2019-09-05 18:58:23 · 2389 阅读 · 2 评论 -
React无状态功能性组件
当你转换一个类组件为sfc(无状态功能性组件)时,要去掉所有this的引用,并将props作为形参传入函数。例如:import React from "react";const Like = props => { let classes = "fa fa-heart"; if (!props.liked) classes += "-o"; return ( <...原创 2019-09-05 19:20:17 · 260 阅读 · 0 评论 -
React类型检测
React有内置的类型检测,但是从版本15开始,它被移到了一个单独的库中,需要独立安装。之所以安装类型检测,是因为当某些props改变或输入错误时,控制台不会报错,但是界面会出现bug。...原创 2019-09-06 10:08:21 · 792 阅读 · 0 评论 -
React路由组件都被渲染
由于访问组件时,ur地址l的开头都是‘/’,所以两个组件都被渲染了,如下图所示,products和home都被渲染了。要解决这个问题,有两种方法:1.使用exact属性。在home组件前面加上exact,只有完全匹配才会生效。<div className="content"> <Route path="/products" component={Products} /&...原创 2019-09-09 19:44:30 · 644 阅读 · 0 评论 -
JavaScript 正则表达式
在正则表达式中,当你在表达式加入问号时,就意味着这个表达式是可选的。<Route path="/posts/:year?/:month?" component={Posts} />原创 2019-09-10 09:09:39 · 79 阅读 · 0 评论 -
React处理查询语句的插件
React处理查询语句的插件:原创 2019-09-10 09:18:36 · 336 阅读 · 0 评论 -
React Route history
history有很多属性。其中push是向浏览器历史添加地址,可以通过回退按钮回到来处;replace是替换当前的页面,这样没有历史记录replace常用于用户登录页面。...原创 2019-09-10 10:34:17 · 298 阅读 · 0 评论 -
React models缺失问题
直接删除文件夹下的node_modules,然后直接npm install重新安装依赖,npm start运行即可。原创 2019-09-18 19:48:07 · 534 阅读 · 0 评论 -
React生命周期(四)
卸载阶段(Unmounting Phase):componentWillUnmount:这个方法只在一个组件从DOM卸载时调用。即在将组件移出DOM前使用。如果设置了计时器或者监听器,可以在组件移除之前做一些清除工作,同时可以做一些内存优化...原创 2019-09-05 16:34:58 · 60 阅读 · 0 评论 -
React生命周期(三)
更新阶段(updating phase):这个阶段在组件的state或者props改变时发生。render:当组件被渲染的时候,实际上是得到了一个React元素,这个元素更新了虚拟DOM。componentDidUpdate:React会拿新的虚拟DOM与旧的虚拟DOM进行比较,然后将修改的部分更新到真实DOM。在这个钩子函数中,我们可以决定何时进行Ajax请求。componentDi...原创 2019-09-05 16:27:54 · 60 阅读 · 0 评论 -
React生命周期函数(二)
装载阶段(Mounting Phase):添加一个构造器(constructor),一般需要通过使用super方法来调用父级的构造器。这个构造器只会调用一次:当一个类的实例创建的时候。这是一个给属性赋值的好机会,(ps:this.setState只有在组件被创建并插入到DOM中之后才能调用)所以如果需要直接设置state,可以在构造器里实现。同样的,不能在构造器里访问this.props...原创 2019-09-05 16:05:57 · 63 阅读 · 0 评论 -
2019-09-04 React Table、Button的使用
要求:代码:movies.jsximport React, { Component } from "react";import { getMovies } from "../services/fakeMovieService";class Movies extends Component { state = { movies: getMovies() }; h...原创 2019-09-04 20:22:17 · 342 阅读 · 0 评论 -
2019-09-05 React动态传递子组件
使用children动态传递子组件Counter.jsximport React, { Component } from "react";class Counter extends Component { state = { value: this.props.value }; // 按钮点击事件,value+1 handleIncrement = () =&...原创 2019-09-05 09:09:36 · 335 阅读 · 0 评论 -
Debugging React Apps
在控制台使用r可以得到组件的实例,通过r可以得到组件的实例,通过r可以得到组件的实例,通过r我们可以处理任何页面上的组件输入$r.render():不只是react中有$r,在Elements中也有$0....原创 2019-09-05 10:11:26 · 66 阅读 · 0 评论 -
react props与state的区别
props是我们给组件的数据,而state是组件本地或者私有的数据容器,其他的组件时不能访问这个组件的state的,它完全只能在组件内被访问。另外,props是只读的,我们不能在组件内部改变组件的输入数据。...原创 2019-09-05 10:39:05 · 80 阅读 · 0 评论 -
React 组件之间props调用删除方法
之前学习了在同一组件下进行删除,直接调用this.state里的数据,进行filter筛选,然后更新状态即可。但是现在counters数组是Counters的一部分,想要在Counter里通过删除按钮删除数据就不能直接使用上述方法了。为此,有了新的解决方法:Counter组件发起事件onDelete,在Counters中实现handleDelete()方法。首先,向Counters组件添加...原创 2019-09-05 13:50:21 · 917 阅读 · 0 评论 -
React生命周期(一)
一个组件在其生命周期中会经历很多状态。第一个状态称为mounting状态,这是组件被实例化并创建到DOM中,这里有一些可以加入组件的特殊方法,React会自动调用这些方法,这些方法被叫做生命周期钩子,它们允许我们在整个生命周期中钩住某个特定的时刻,并做一些事情。在mounting状态中有3个声明周期函数,React会按顺序调用这些方法:第二个状态是update状态,这个状态在state或...原创 2019-09-05 15:33:11 · 75 阅读 · 0 评论 -
React新建出现问题
Uncaught Error: Cannot find module ‘D:\project\react-counter-app-mosh\node_modules\babel-preset-react-app\node_modules@babel\runtime/helpers/slicedToArray’at webpackMissingModule (formatWebpackMessag...原创 2019-09-04 13:53:27 · 1331 阅读 · 0 评论