2020年5月28日
React父子组件传值
摘要： 父组件向子组件传值使用props，子组件向父组件传值通过触发方法来传值。具体栗子如下。 一、创建父组件index import React, { useState } from "react"; import { Input } from 'antd' import ChildComponent f 阅读全文
posted @ 2020-05-28 10:10 MinorF_γ 阅读(1353) 评论(0) 推荐(1)
2020年5月22日
使用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_γ 阅读(10943) 评论(1) 推荐(1)
2020年5月20日
使用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_γ 阅读(450) 评论(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_γ 阅读(3218) 评论(0) 推荐(0)
Ant Design的Table组件去除“取消排序”选项
摘要： 在Ant Design的Table组件文档中，排序有三种状态：点击升序、点击降序、取消排序。一般需求只需要升序和降序，不需要取消排序，这时候就需要我们设置sortOrder来去除取消排序。 首先，我们从官方文档中ctrl+c出一个排序栗子，放在我们的组件中。 import React, { useE 阅读全文
posted @ 2020-05-20 10:35 MinorF_γ 阅读(7706) 评论(1) 推荐(0)
2020年5月18日
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_γ 阅读(1644) 评论(0) 推荐(0)
2020年5月15日
webpack配置alias简化相对路径
摘要： 使用场景：当组件层级较深时，底层组件需要使用其他模块的组件，就需要写很多个../../，这个时候就会显得路径很长，还不直观。如下 在src->pages->Test->Test1的index组件中，需要引用App.tsx组件，这个时候，就会显得../很多，看起来不直观。 如何解决呢？此时就需要web 阅读全文
posted @ 2020-05-15 16:52 MinorF_γ 阅读(5002) 评论(0) 推荐(0)
webpack的环境变量以及配置请求路径
摘要： 使用create-app-react创建项目，执行npm run eject暴露配置文件 进入config->env.js文件，在该文件中找到getClientEnvironment函数，此函数返回的是客户端的环境变量 在getClientEnvironment函数中，NODE_ENV既为环境变量， 阅读全文
posted @ 2020-05-15 15:57 MinorF_γ 阅读(2017) 评论(0) 推荐(0)
React添加部分依赖
摘要： 一、修改webpack配置 使用create-react-app创建项目后，webpack配置无法修改，执行npm run eject 弹出配置文件，即可更改webpack配置 执行完毕后，会多一个config和scripts文件夹，并且package.json中多了很多配置 注意！！！执行之后，直 阅读全文
posted @ 2020-05-15 13:13 MinorF_γ 阅读(1066) 评论(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_γ 阅读(312) 评论(0) 推荐(0)