react
本篇章记录react相关的开发问题,和处理的方案
追逐梦想之路_随笔
这个作者很懒,什么都没留下…
展开
-
react+umi项目中引入antd组件报错:“Button”不能用作 JSX 组件解决方案
错误解决方案原创 2023-09-25 10:06:39 · 1576 阅读 · 0 评论 -
customize-cra修改默认端口以及文件输出路径
2.方案2 使用react-app-rewired/customize-cra修改原来的create-react-app的配置项,这种方式因为改动小,所以在这主要推荐这种方式处理一些快速搭建的项目,对自定义webpack没有太多要求,而且关注快速开发。: 直接执行package.json指令,将所有webpack配置项都暴露出来,然后挨个改,显然这种方式对于大项目对自定义webpack有强烈要求的话可以这么做,但全部暴露显的项目代码文件更多,可能对一些小项目不是那么友好。原创 2023-05-25 11:07:38 · 719 阅读 · 0 评论 -
webpack5基于React+Antd搭建开发和生产环境
webpack构建react开发实践原创 2022-10-01 22:10:15 · 716 阅读 · 0 评论 -
react-router的params/search/state传参方式(对比React-Router4/5/6)
react日常开发总结原创 2022-08-31 22:30:46 · 1332 阅读 · 0 评论 -
react的条件渲染(或者组件渲染)五种方式 --开发基础总结
react开发总结原创 2022-07-14 18:13:02 · 2533 阅读 · 0 评论 -
react class组件事件绑定this和事件传递参数方式--日常总结
react开发基础总结原创 2022-07-14 17:48:01 · 857 阅读 · 0 评论 -
react如何调用子组件身上的方法
使用场景:需要重复触发子组件弹窗或者需要在子组件修改值的时候可以采用调用子组件身上特定方法执行操作。在次介绍一下最新hooks的操作和旧版本class组件调用方式一.Hooks api调用方式需要用到的Api:useRef useImperativeHandle forwardRef简单说明:1.useRef: 用于获取元素的原生DOM或者获取自定义组件所暴露出来的ref方法(父组件可以通过ref获取子组件,并调用相对应子组件中的方法)2.useImperativeHandle:在函数式组件中,原创 2022-05-26 22:41:24 · 7690 阅读 · 2 评论 -
Hooks的useSelector、useDispatch的出现和基本使用
官方文档介绍:React Redux 从 v7.1.0 开始暴露了 useDispatch 和 useSelector 等 hookAPI。以替代 Redux connect(),减少Redux在使用connect(mapStateToProps, mapDispatchToProps)代码量:1.之前旧版本的class类式组件用法import React,{ Component } from "react";import { connect } from "react-redux";inter原创 2022-05-24 11:32:49 · 1062 阅读 · 0 评论 -
umi引入@ant-design/icons typescript类型报错
umi引入@ant-design/icons typescript类型报错例如: import { SearchOutlined } from '@ant-design/icons'; <Button type="primary" shape="circle" icon={<SearchOutlined/>} />解决方案:把antd版本改成和@ant-design/icons保持一致package.json "@ant-design/icons": "^4.7.0"原创 2022-05-20 10:34:36 · 1435 阅读 · 1 评论 -
react-router6的基本使用
新建一个router文件夹,在文件夹下面建一个index.jsx把需要路由包裹的组件都引入路由中,既可自由切换。import { Component } from 'react';import { BrowserRouter, Routes, Route } from 'react-router-dom';import Test from '../components/test.tsx';import App from '../App.tsx';export default class Rout原创 2022-05-16 23:37:36 · 559 阅读 · 0 评论 -
dva的models自动引入所有子文件方案
如果models下面有很多文件用来定义redux模块的状态以及各种reducer等,可以使用该方法将models所有文件暴露出去,在入口文件index.js中引入models/index.js/* 处理所有的models文件 */const context = require.context("./", false, /\.js$/);export default context .keys() .filter((item) => item !== "./index.js") .m原创 2022-05-15 17:41:44 · 278 阅读 · 0 评论 -
dva中mockjs和fetch基本使用
在构建好的dva框架中直接在mock里面设置自己想要的js数据模拟接口模块,比如:mock/goodsList.jsget的请求const Mock = require("mockjs");module.exports = { "GEt /api/goods/list": (req, res) => { res.status(200).json( Mock.mock({ "data|10-30": [ { ty原创 2022-05-15 17:06:32 · 1192 阅读 · 0 评论 -
dva子组件跳转页面三种方式
方式一.视图跳转 Linkimport { Link } from "dva/router"; render() { return ( <> <Link to="/">去首页</Link> </> ); }方式二.借助withRouter的history.push实现跳转import { withRouter} from "dva/router";class GoodList extend原创 2022-05-12 21:30:10 · 644 阅读 · 0 评论 -
dva中redux读取和修改数据基本操作
1.models/goodList.js文件export default { namespace: "goodList", state: { goodsList: [ { type: "小说", name: "莫泊桑小说", }, { type: "历史", name: "秦皇治国史册", }, { type: "文学", name:原创 2022-05-12 21:07:42 · 1756 阅读 · 0 评论 -
react的Hook使用的规则(注意事项)
只在最顶层使用 Hook不要在循环,条件或嵌套函数中调用 Hook, 确保总是在你的 React 函数的最顶层调用他们。遵守这条规则,你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。(如果你对此感到好奇,我们在下面会有更深入的解释。)只在 React 函数中调用 Hook不要在普通的 JavaScript 函数中调用 Hook。你可以:✅ 在 React 的函数组件中调用 Hoo原创 2021-12-26 00:31:25 · 1081 阅读 · 0 评论 -
react的useEffect Hook的应用
import { useState, useEffect } from 'react';/* Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性useEffect 做了什么? 通过使用这个 Hook,你可以告诉 React 组件需要在渲染后执行某些操作useEffect 会在每次渲染后都执行吗? 是的,默认情况下,它在第一次渲染之后和每次更新之后都会执行。React 保证了每次运行 effect 的同时,DOM原创 2021-12-26 00:19:46 · 286 阅读 · 0 评论 -
react的useState Hook的基本使用
import { useState } from 'react';export default function App() { //基本数据初始化 const [count, setCount] = useState(0); const [str, setStr] = useState('您好'); let [curentIndex, setCurentIndex] = useState(0); // 对象初始化 const [obj, setObj] = useState({原创 2021-12-25 22:58:00 · 410 阅读 · 0 评论 -
react脚手架创建方式(使用最新版本)
如果想使用最新的react版本构建方式将不在支持全局的脚手架方式注意:如果您之前已create-react-app通过 全局安装npm install -g create-react-app,我们建议您使用npm uninstall -g create-react-app或卸载软件包yarn global remove create-react-app以确保npx始终使用最新版本。1.快速启动方式一npx create-react-app my-appcd my-appnpm start2.原创 2021-12-25 16:34:50 · 705 阅读 · 0 评论 -
react context新版本(2) 代码
context的基本使用新版1、全局定义context对象globalContext.jsimport React from “react”;const GlobalContext = React.createContext();export default GlobalContext;2、根组件引入GlobalContext,并使用GlobalContext.Provider(生产者...原创 2019-04-19 08:52:00 · 167 阅读 · 0 评论 -
react使用axios并实现二次封装
在react脚手架项目中安装axios在这使用到了Cookies 顺手安装一个yarn add axios js-cookie在src下新建一个文件夹httpRequest,在里面新建index.js封装内容如下:import axios from "axios";import Cookies from "js-cookie";// 请求的时间axios.defaults.timeout = 100000;// 域名设置axios.defaults.baseURL = process.原创 2021-07-16 17:08:13 · 947 阅读 · 0 评论 -
react脚手架如何按需引入antd
在项目中需要安装以下几个关键的包,不然容易出现各个报错: yarn add antd babel-plugin-import customize-cra dotenv-cli less less-loader;接下来在入口文件index.js引入antd的样式index.js中加入:import "antd/dist/antd.min.css";最后在根目录下建一个js文件:config-overrides.js文件内容按需引入const { override, fixBabel原创 2021-07-14 16:42:23 · 458 阅读 · 0 评论 -
react的ref三种用法
第一种 字符串的refref=“myRef” 里面的绑定是字符串的绑定用法,这种ref的形式写多了影响效率问题,官方文档已经不推荐此写法//创建类式组件 class Demo extends React.Component { //点击按钮 showData = () => { const { input1 } = this.refs; alert(input1.value); };原创 2021-05-11 01:04:57 · 495 阅读 · 0 评论