Tec Zoom

当鼠标停在svg图片上时，鼠标指针变成小手：

通过行内样式，给style一个样式style={{ cursor: "pointer" }}

当你转换一个类组件为sfc（无状态功能性组件）时，要去掉所有this的引用，并将props作为形参传入函数。例如：import React from "react";const Like = props => { let classes = "fa fa-heart"; if (!props.liked) classes += "-o"; return ( &lt...

React有内置的类型检测，但是从版本15开始，它被移到了一个单独的库中，需要独立安装。之所以安装类型检测，是因为当某些props改变或输入错误时，控制台不会报错，但是界面会出现bug。...

由于访问组件时，ur地址l的开头都是‘/’，所以两个组件都被渲染了，如下图所示，products和home都被渲染了。要解决这个问题，有两种方法：1.使用exact属性。在home组件前面加上exact，只有完全匹配才会生效。<div className="content"> <Route path="/products" component={Products} /&...

在正则表达式中，当你在表达式加入问号时，就意味着这个表达式是可选的。<Route path="/posts/:year?/:month?" component={Posts} />

React处理查询语句的插件：

history有很多属性。其中push是向浏览器历史添加地址，可以通过回退按钮回到来处；replace是替换当前的页面，这样没有历史记录replace常用于用户登录页面。...

直接删除文件夹下的node_modules，然后直接npm install重新安装依赖，npm start运行即可。

卸载阶段（Unmounting Phase）：componentWillUnmount：这个方法只在一个组件从DOM卸载时调用。即在将组件移出DOM前使用。如果设置了计时器或者监听器，可以在组件移除之前做一些清除工作，同时可以做一些内存优化...

更新阶段（updating phase）：这个阶段在组件的state或者props改变时发生。render：当组件被渲染的时候，实际上是得到了一个React元素，这个元素更新了虚拟DOM。componentDidUpdate：React会拿新的虚拟DOM与旧的虚拟DOM进行比较，然后将修改的部分更新到真实DOM。在这个钩子函数中，我们可以决定何时进行Ajax请求。componentDi...

装载阶段(Mounting Phase）：添加一个构造器（constructor），一般需要通过使用super方法来调用父级的构造器。这个构造器只会调用一次：当一个类的实例创建的时候。这是一个给属性赋值的好机会，（ps：this.setState只有在组件被创建并插入到DOM中之后才能调用）所以如果需要直接设置state，可以在构造器里实现。同样的，不能在构造器里访问this.props...

要求：代码：movies.jsximport React, { Component } from "react";import { getMovies } from "../services/fakeMovieService";class Movies extends Component { state = { movies: getMovies() }; h...

使用children动态传递子组件Counter.jsximport React, { Component } from "react";class Counter extends Component { state = { value: this.props.value }; // 按钮点击事件，value+1 handleIncrement = () =&...

在控制台使用r可以得到组件的实例，通过r可以得到组件的实例，通过r可以得到组件的实例，通过r我们可以处理任何页面上的组件输入$r.render()：不只是react中有$r，在Elements中也有$0....

props是我们给组件的数据，而state是组件本地或者私有的数据容器，其他的组件时不能访问这个组件的state的，它完全只能在组件内被访问。另外，props是只读的，我们不能在组件内部改变组件的输入数据。...

之前学习了在同一组件下进行删除，直接调用this.state里的数据，进行filter筛选，然后更新状态即可。但是现在counters数组是Counters的一部分，想要在Counter里通过删除按钮删除数据就不能直接使用上述方法了。为此，有了新的解决方法：Counter组件发起事件onDelete，在Counters中实现handleDelete()方法。首先，向Counters组件添加...

一个组件在其生命周期中会经历很多状态。第一个状态称为mounting状态，这是组件被实例化并创建到DOM中，这里有一些可以加入组件的特殊方法，React会自动调用这些方法，这些方法被叫做生命周期钩子，它们允许我们在整个生命周期中钩住某个特定的时刻，并做一些事情。在mounting状态中有3个声明周期函数，React会按顺序调用这些方法：第二个状态是update状态，这个状态在state或...

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...