小怪獸丶的糖的专栏

Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)，可以把useEffect Hook看做 componentDidMount（） 、componentDidUpdate()、componentWillUnmount()三个函数的组合官方文档说明：使用Effect Hook语法说明React.useEffect(()=>{ //这里可以执行任何带副作用操作 return ()=>{//在组件卸载前执行 //在

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。官方文档地址：使用 State Hookimport React, { Component } from "react";function Demo() { console.log("demo"); const [count, setCount] = React.useState(0); const [weather, setWeather] = Reac

在React中使用lazy懒加载效果图目录结构index.jsimport React from "react";import ReactDOM from "react-dom";import App from "./App";import { BrowserRouter } from "react-router-dom";ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter&gt

在执行react打包命名npm run build时候报错 MiniCssExtractPlugin is not a constructor解决办法：降低版本npm i -D --save-exact mini-css-extract-plugin@2.4.5之后再打包即正常啦

chrome浏览器点击右上角自定义及控制的图标找到更多工具=》扩展程序，然后点击加载已解压的扩展程序，找到解压好的工具文件夹，选择文件夹即可。然后安装redux-devtools-extensionnpm add redux-devtools-extension或者yarn add redux-devtools-extension在store中进行配置/**该文件专门用于暴露一个store对象，整个应用只有一个store对象 *///引入createStore,专门用于创建redux中最为核心

文件=》首选项=》键盘快捷方式在搜索框中输入转换即可查询到转换为大写和小写，点击左边的编辑或者添加符号即可进行快捷键的设置. 这里我设置的是CTRL+T+U为转换为大写，CTRL+T+S为小写

效果图npm add redux-thunkCount组件中，原本使用settimeout的地方改为调用异步actioncomponent=>Count=>index.jsximport React, { Component } from 'react'//引入store,用于获取redux中报错的状态import store from '../../redux/store'//引入actionCreator，专门用于创建action对象import { creat

相较于简单版本新增了2个文件 1.count_action.js专门用于创建action对象 2.constant.js放置容易写错的type值redux文件夹中新增count_action.js文件/**该文件专门为Count组件生成action对象 */import{INCREMENT,DECREMENT} from './constant'export const createIncrementAction=data=>({type:INCREMENT,data})export

效果图安装redux,此处安装的版本是4.1.2npm add reduxApp.jsimport React, { Component } from 'react'import Count from './components/Count'export default class App extends Component { render() { return ( <div> <Count/&

antd默认的按钮颜色是蓝色，现在想要改变它的主题为绿色在初始化craco-less的时候出错，然后尝试了降低craco的版本以及安装指定craco-less指定版本都没有解决，后来仔细看错误提示找到了一个 解决办法解决办法，执行npm i -S craco-less --force就可以正常安装成功了npm i -S craco-less --forcecraco.config.js//配置具体的修改规则const CracoLessPlugin = require('craco-les

先参照官方文档高级配置首先执行npm add @craco/cracoadd @craco/craco修改package.json中关于scripts中的配置，保留绿色部分，去除红色部分，eject这里暂时没有管"scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" },然后初始化bab

在执行create-react-app demo创建项目的时候，报错。提示以下信息You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).We no longer support global installation of Create React App.解决办法：首先卸载create-react-appnpm uninstall -g create-react-app然后

Message/index.jsximport React, { Component } from "react";import { Link, Route, Routes } from "react-router-dom";import Detail from "./Detail";class News extends Component { state = { messageArr: [ { id: "1", title: "消息1" }, { id: "2"

资讯列表页面路由传参代码关键部分 <Link to={`/home/message/detail?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> <Routes> {/**声明接收params参数 */} <Route path="detail/:id/:title" element={<Detail />}></R

效果图App.jsimport React, { Component } from "react";import { Route, Routes,Navigate } from "react-router-dom";import Home from "./pages/Home"; //home是路由组件import About from "./pages/About"; //about是路由组件import Header from "./components/Header"; //header

在使用Redirect设置默认路由的时候，报错 'Redirect' is not exported from 'react-router-dom' 原因：react6.0已经不再支持Redirect了解决办法如下：使用Navigate <Route path="*" element={<Navigate to ="/about" />}/>...

刷新后解决办法public/index.html中引入样式时不写./写/(常用)public/inex.html中引入样式不写./写%PUBLIC_URL%（常用）使用HashRouter

版本使用的是6.0的react-router，想实现的效果是菜单点击高亮显示。使用activeClassName设置高亮的class 名称时。没有效果问题原因：6.0版本官方已经不再支持activeClassName这种写法了，换成动态设置className即可 <NavLink className={({ isActive }) => "list-group-item" + (isActive ? " mactive" : "")} to="/about">

效果图目录结构安装路由npm add react-router-domindex.js//引入react核心库import React from "react";//引入ReactDOMimport ReactDOM from "react-dom";//引入Appimport App from "./App";import {BrowserRouter } from "react-router-dom";ReactDOM.render( <BrowserRoute

react：pubsub-js 消息订阅与发布实现兄弟组件之间传值，以及简单的使用案例

在react脚手架中配置代理一般有两种方式一、通过package.json配置在package.json中增加以下配置"proxy":"http://localhost:5000"通过package.json配置代理的说明配置简单，前端请求资源时可以不加任何前缀不可以配置多个代理配置以后，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）二、通过代理配置文件第一步：在src下创建代理配置文件setupProxy.js，该js不可以更换名称在setup

简介一个简单的todolist案例，可实现添加、删除待办事项、全选以及清除全选操作知识点汇总className和style的写法如何确定将需要的数据放在哪个组件的state中（单个组件使用的：放在其自身组件的staet中即可,如果是多个组件使用：则放在它们共同的父组件的state中）父子之间传值【父传子】：通过props，【子传父】也是通过props传递，但是需要在父组件提前给子组件传递一个函数，然后在子组件需要传递给父组件的地方调用这个函数即可defaultChecked和checked的区

在扩展中搜索react,找到es7开头的这个插件进行安装。安装完以后即可快速生成代码块，示例如下：输入rcc 然后回车即可快速生成组件代码块，非常方便。要查看其他的快捷方式可在扩展中下拉查询到哦，这样真的非常方便啊...

React引入两个组件，一个Hello、一个Welcom，并且Hello和Welcome中均有一个class名称为title的标签，如果不使用样式模块化，那么最终这两个组件的背景色会一样。此时可以使用样式的模块化，首先将组件的样式改为xxx.module.css,然后在使用中更改样式赋值的方式Hello/index.jsx中代码import React,{Component} from 'react'import hello from './index.module.css'export def

一、安装create-react-appnpm i create-react-app -g二、在指定文件创建react项目create-react-app react_demo三、安装成功以后,cmd命令进入react_demo文件夹，执行npm start即可看到效果

效果：新闻随时增加，但是滚动条出现后，新的新闻一直不断增加，但是可视范围的新闻不会发生滚动，所以能看全。避免新闻滚到不可见区域。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte

第一步：扩展中安装Reactjs code snippets第二步：文件=》首选项=》输入@tag:usesOnlineServices 禁用typescript 自动类型获取第三步：文件=》首选项=》输入框中输入language,选择emmet，添加javascript:javascriptreact最后，选择html文件右键没有打开浏览器的选项解决办法:在扩展中输入open in browser选择第一个安装即可安装好以后，点击html文件右键就有打开浏览器选项的操作了哦...