目录：
- 0、创建react项目
- 1、动态设置className
- 2、引入resources图片资源
- 3、传值，可以设置一个初始值，避免报错
- 4、antd：修改的样式
- 5、react的清除console.log
- 6、antd：table设置高度
- 7、父、子组件传值
- 8、生命周期更新
- 9、react+hashRouter+锚点功能、局部滚动
- 10、antd：下拉和日期选项无法随浏览器滚动
- 11、使用refs
- 12、使用addWebpackAlias配置导入路径、antd的按需加载以及主题颜色换肤
- 13、使用阿里图标
- 14、antd：Anchor锚点使用注意事项
- 15、antd：table可伸缩列
- 16、修改配置多环境打包
- 17、antd：手动上传文件
- 18、Vuex、Flux、Redux、Redux-saga、Dva、MobX
- 19、package-lock.json的作用
- 20、antd：InputNumber控制小数点
- 21、router里的switch使用注意事项
- 22、antd：Tooltip随鼠标移动
正文
0、创建react项目
npx create-react-app <项目名>
cd <项目名>
npm start
创建配置文件
1、npm i customize-cra react-app-rewired --dev
npm i less [email protected] --dev // 配置less
2、修改package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
3、在项目根目录创建一个config-overrides.js
const { override, addLessLoader } = require("customize-cra");
const path = require("path");
module.exports = override(
// 使用less-loader
addLessLoader({
lessOptions: {
javascriptEnabled: true,
}
}),
);
1、动态设置className
2、引入resources图片资源
3、传值，可以设置一个初始值，避免报错
const { detail = {} } = this.props.state
4、antd：修改的样式
:global { // 这里的类名不会变
.blackList {
width: 100%;
height: 100%;
.ant-select-selection--multiple {
max-height: 28px;
overflow: auto;
cursor: text;
padding-bottom: 3px;
zoom: 1;
}
}
}
5、react的清除console.log
// 方案一
// .webpackrc.js文件
var path = require('path');
export default {
"env": {
"production": {
"extraBabelPlugins": [
"transform-remove-console"
]
}
}
}
// 方案二
uglifyjs-webpack-plugin：这个webpack插件可以帮助你在打包的时候去掉console。
使用create-react-app创建项目，并且没有使用eject将包解出来，可以采用了customize-cra和react-app-rewired
1、安装这三个插件
npm i customize-cra react-app-rewired --dev
npm install uglifyjs-webpack-plugin --save-dev
2、修改package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
3、在项目根目录创建一个config-overrides.js
4、将下面代码添加到config-overrides.js中
const { override, addWebpackPlugin } = require('customize-cra');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = override(
// 判断环境，只有在生产环境的时候才去使用这个插件
// 如果不想这样做的话可以只修改build的命令为"build": "react-app-rewired build"
process.env.NODE_ENV === 'production' && addWebpackPlugin(new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_debugger: true,
drop_console: true
}
}
}))
);
参考文件：https://www.jianshu.com/p/366880601412
参考文件：https://www.cnblogs.com/adolphRe/p/13202810.html
6、antd：table设置高度
// 1、自适应高度
// 2、固定高度：设置样式
.ant-table {
min-height: 352px !important;
}
7、父、子组件传值
- 16.3.0之前的设置方法为
// 子组件
var HelloMessage = React.createClass({
childMethod: function(){
alert("组件之间通信成功");
},
render: function() {
return Hello {this.props.name}
}
});
// 父组件
var ImDaddyComponent = React.createClass({
getDS: function(){
// 调用组件进行通信
this.refs.getSwordButton.childMethod();
},
render: function(){
return (
// 子组件引用
- 16.3.0之后(包括16.3.0 version)的设置方法为
import React, {Component} from 'react';
export default class Parent extends Component {
render() {
return(
参考文件：https://www.cnblogs.com/universe-cosmo/p/10969351.html
8、生命周期更新
componentWillMount -> UNSAFE_componentWillMount
componentWillReceiveProps -> UNSAFE_componentWillReceiveProps
9、react+hashRouter+锚点功能
// 滚动方法
scrollToAnchor = (anchorName) => {
if (anchorName) {
let anchorElement = document.getElementById(anchorName);
console.log(anchorElement)
if(anchorElement) {
this.setState({
curTab: anchorName
})
let scrollHeight = anchorElement.offsetTop - 65;
console.log(scrollHeight)
window.scrollTo(0,scrollHeight);
}
}
}
// 点击跳转列表
const HeaderTabs = [
{
href: 'auction-detail',
text: '拍卖详情'
},
{
href: 'standard-detail',
text: '标的详情'
},
]
// 页面布局
{
HeaderTabs.map((item,index)=>
)}
参考文件：https://blog.csdn.net/weixin_38304202/article/details/82852946
参考文件：局部滚动：https://www.jianshu.com/p/772da38df7a2
10、antd：下拉和日期选项无法随浏览器滚动
image.png
getPopupContainer={triggerNode => triggerNode.parentNode}
11、使用refs
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
const node = this.myRef.current
return ;
}
}
参考文件：https://www.jianshu.com/p/d332b8d94932
12、使用addWebpackAlias配置导入路径、antd的按需加载以及主题颜色换肤
- React + TypeScript
- 使用customize-cra插件修改webpack配置如下
// config-overrides.js文件
const {
override,
fixBabelImports,
addLessLoader,
addWebpackModuleRule,
addWebpackAlias
} = require("customize-cra");
const path = require("path");
const AntdScssThemePlugin = require("antd-scss-theme-plugin");
module.exports = override(
// 默认路径设置
addWebpackAlias({
"@": path.resolve(__dirname, "./src"),
"@share": path.resolve(__dirname, "./src/share"),
"@mocks": path.resolve(__dirname, "./src/mocks"),
"@static": path.resolve(__dirname, "./src/static"),
"@containers": path.resolve(__dirname, "./src/containers"),
"@components": path.resolve(__dirname, "./src/components"),
}),
// 处理antd样式问题
fixBabelImports("import", {
libraryName: "antd",
libraryDirectory: "es",
style: true, // //自动打包相关的样式 默认为 style:'css'
}),
// new AntdScssThemePlugin("./src/styles/theme.scss")
// 使用less-loader对源码重的less的变量进行重新制定，设置antd自定义主题
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: {'@primary-color': '#1DA57A'}
}
}),
// 处理scss和less互相使用
addWebpackModuleRule(
// This rule will only be used for converting our sass-variables to less-variables
{
test: /\.scss$/,
issuer: /\.less$/,
use: {
loader: "./sassVarsToLess.js" // Change path if necessary
}
}
)
);
image.png
参考文件：官网
13、使用阿里图标
（1）制作字体图标
- 首先进入阿里巴巴矢量图网站：http://www.iconfont.cn/
- 通过搜索需要的图片的关键字搜索图标，如"购物车"
-
点击回车键，选择自己喜欢的图标，添加入库，点击右上角的购物车图标，如下如
image.png - 点击"下载代码",将子图图标下载到本地电脑并进行解压
（2）react项目中使用该字体图标
-
在react项目的public文件夹下面创建iconfont文件夹，将如下文件放到iconfont文件夹下：
image.png - 在public文件夹下的index.html引入iconfont.css，如
- 使用如下即可
参考文件：https://segmentfault.com/a/1190000016639485
参考文件：https://blog.csdn.net/youlinaixu/article/details/91906219
参考文件：https://blog.csdn.net/ligaoming_123/article/details/106639327
14、antd：Anchor锚点使用注意事项
-
问题：点击锚点后，没有按想象中的实现锚功能（想展示的部分在页面最顶部），而是路由跳转了
于是仔细检查了下是不是自己写法有问题：
image.png
image.png - 原因
antd Anchor底层是使用的a标签实现锚点功能的，而a标签的默认行为就是路由跳转（跳转到href），只要阻止a标签的默认行为就可以了。 - 解决
阻止a标签的默认行为
handleAnchorClick = (e,link) => {
e.preventDefault();
};
image.png
参考文件：https://blog.csdn.net/sinat_36359516/article/details/109840155
15、antd：table可伸缩列
参考文件：https://www.jianshu.com/p/012f357d538c
16、修改配置多环境打包
- 修改配置
1、可以通过 npm run eject 命令将配置文件暴露出来，然后去修改里面的webpack配置。
2、安装 react-app-rewired 包后，在根目录创建 config-overrides.js 自定义配置，最后修改 package.json 中的 scripts（替换react-scripts为react-app-rewired）。 - 多环境配置
1、安装 dotenv-cli 包
2、根据需求在根目录创建 .env 文件（注意：只能以 REACT_APP_ 开头），如创建 .env.development、.env.production，内容如下：
// .env.development
REACT_APP_ENV=development
// .env.production
REACT_APP_ENV=production
3、继续修改 package.json 中的 scripts 指定环境。
- package.json demo如下：
"scripts": {
"start": "react-app-rewired start",
"build:dev": "dotenv -e .env.development react-app-rewired build",
"build:pro": "dotenv -e .env.production react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"devDependencies": {
"dotenv-cli": "^2.0.1",
"react-app-rewired": "^2.1.3"
}
参考文件：https://blog.csdn.net/songshu92/article/details/99567343
17、antd：手动上传文件
{
this.setState({
fileList: [...this.state.fileList, file],
});
return false; // 禁止上传
}}
>
参考文件：官网
18、Vuex、Flux、Redux、Redux-saga、Dva、MobX
19、package-lock.json的作用
20、antd：InputNumber控制小数点参考文件
const limitDecimals = (value: string | number): string => {
const reg = /^(\-)*(\d+)\.(\d\d\d\d).*$/;
// console.log(value);
if(typeof value === 'string') {
return !isNaN(Number(value)) ? value.replace(reg,'$1$2.$3') : ''
} else if (typeof value === 'number') {
return !isNaN(value) ? String(value).replace(reg,'$1$2.$3') : ''
} else {
return ''
}
};
//输入框绑定方法
{
if (typeof value === 'string') {
return !isNaN(Number(value)) ? String(Math.floor(Number(value))) : ''
} else if (typeof value === 'number') {
return !isNaN(value) ? String(value).replace(/^(0+)|[^\d]/g, '') : ''
} else {
return ''
}
}}
/>
21、router里的switch使用注意事项
-
switch作用于它的直接子元素
image.png
image.png
22、antd：Tooltip随鼠标移动
image.png
推荐文件：JS：开发技巧
推荐文件：面试题：05：React