05 2020 档案

谷歌浏览器新开页面进程问题
摘要：开发项目过程中，会遇到点击页面上某个东西，要在新窗口中打开一个页面的需求。如果你认为是简简单单的打开一个新窗口，那就会掉进谷歌浏览器的坑里了。 场景：在A页面，点击按钮，新开窗口跳转到该项目的B页面，如果B页面的请求尚未结束，直接关闭B页面，此时A页面会卡死。 原因：谷歌浏览器在给新开窗口分配进程时 阅读全文
posted @ 2020-05-29 14:17 MinorF_γ 阅读(2298) 评论(0) 推荐(1)
如何使用Context
摘要：一、Context Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。 二、设计目的 Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据。 三、使用场景 Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨 阅读全文
posted @ 2020-05-28 14:42 MinorF_γ 阅读(263) 评论(0) 推荐(0)
React父子组件传值
摘要：父组件向子组件传值使用props，子组件向父组件传值通过触发方法来传值。具体栗子如下。 一、创建父组件index import React, { useState } from "react"; import { Input } from 'antd' import ChildComponent f 阅读全文
posted @ 2020-05-28 10:10 MinorF_γ 阅读(1358) 评论(0) 推荐(1)
使用Ant Design的Upload上传删除预览照片，以及上传图片状态一直处于uploading的解决方法。
摘要：一、界面构建 1、创建index父组件 import React from "react"; import { Form } from "antd"; import UploadComponent from "./UploadComponent"; export default () => { co 阅读全文
posted @ 2020-05-22 17:12 MinorF_γ 阅读(10979) 评论(1) 推荐(1)
使用react-redux
摘要：使用react-redux能让我们组件之间互相通信，并且相比较以前的写法，更加的简单明了。在使用前，我们需要npm install一下react-redux以及reduxjs/toolkit。 一、添加react-redux和reduxjs/toolkit npm install react-red 阅读全文
posted @ 2020-05-20 19:44 MinorF_γ 阅读(454) 评论(0) 推荐(1)
URLSearchParams生成和解析URL或者参数字符串
摘要：开发项目的过程中，可能需要解析和生成相应的URL，使用URLSearchParams可以更快的去生成或者解析。 一、添加URLSearchParams 首先需要npm install个url-search-params-polyfill包 npm install url-search-params- 阅读全文
posted @ 2020-05-20 13:23 MinorF_γ 阅读(3236) 评论(0) 推荐(0)
Ant Design的Table组件去除“取消排序”选项
摘要：在Ant Design的Table组件文档中，排序有三种状态：点击升序、点击降序、取消排序。一般需求只需要升序和降序，不需要取消排序，这时候就需要我们设置sortOrder来去除取消排序。 首先，我们从官方文档中ctrl+c出一个排序栗子，放在我们的组件中。 import React, { useE 阅读全文
posted @ 2020-05-20 10:35 MinorF_γ 阅读(7781) 评论(1) 推荐(0)
React Hooks的useState和useEffect
摘要：一、useState 在React组件类中，声明变量的方法是在constructor中this.state={ 变量名:值 }，比如什么一个count变量，this.state={ count:0 }，修改count的方法是this.setState({count:1}) 在Hooks中，声明一个变 阅读全文
posted @ 2020-05-18 18:15 MinorF_γ 阅读(1646) 评论(0) 推荐(0)
webpack配置alias简化相对路径
摘要：使用场景：当组件层级较深时，底层组件需要使用其他模块的组件，就需要写很多个../../，这个时候就会显得路径很长，还不直观。如下 在src->pages->Test->Test1的index组件中，需要引用App.tsx组件，这个时候，就会显得../很多，看起来不直观。 如何解决呢？此时就需要web 阅读全文
posted @ 2020-05-15 16:52 MinorF_γ 阅读(5026) 评论(0) 推荐(0)
webpack的环境变量以及配置请求路径
摘要：使用create-app-react创建项目，执行npm run eject暴露配置文件 进入config->env.js文件，在该文件中找到getClientEnvironment函数，此函数返回的是客户端的环境变量 在getClientEnvironment函数中，NODE_ENV既为环境变量， 阅读全文
posted @ 2020-05-15 15:57 MinorF_γ 阅读(2025) 评论(0) 推荐(0)
React添加部分依赖
摘要：一、修改webpack配置 使用create-react-app创建项目后，webpack配置无法修改，执行npm run eject 弹出配置文件，即可更改webpack配置 执行完毕后，会多一个config和scripts文件夹，并且package.json中多了很多配置 注意！！！执行之后，直 阅读全文
posted @ 2020-05-15 13:13 MinorF_γ 阅读(1071) 评论(0) 推荐(0)
使用Creat React App 创建 React 单页应用程序
摘要：Creat React App官方文档链接：https://www.html.cn/create-react-app/docs/getting-started/ 一、直接创建项目不添加任何依赖 根据官方文档说明，npx是需要npm 5.2+或者更高版本才能支持，所以在项目创建前，使用npm -v 查 阅读全文
posted @ 2020-05-15 11:02 MinorF_γ 阅读(313) 评论(0) 推荐(0)