1.proxy_pass 代理规则（是否以”／”结尾）
（1）配置 proxy_pass 时，当在后面的 url 加上了 /，相当于是绝对路径，则 Nginx 不会把 location 中匹配的路径部分加入代理 uri。
- 比如下面配置，我们访问 http://IP/proxy/test.html，最终代理到 URL 是 http://127.0.0.1/test.html
（2）如果配置 proxy_pass 时，后面没有 /，Nginx 则会把匹配的路径部分加入代理 uri。
- 比如下面配置，我们访问 http://IP/proxy/test.html，最终代理到 URL 是 http://127.0.0.1/proxy/test.html
2.React Router 5.1.0使用useHistory做页面跳转导航
从React Router v5.1.0开始，新增了useHistory钩子（hook），如果是使用React >16.8.0，编写以下函数组件，使用useHistory即可实现编程时页面跳转导航。
示例：
import { useHistory } from "react-router-dom";
function HomeButton() {
const history = useHistory();
function handleClick() {
history.push("/home");
}
return (
Go home
);
}
2.react模板字符串${param}
传统的 JavaScript 语言，输出模板通常是这样写的。
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);
上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。
$('#result').append(
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
);
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
3.报错解决方法
1).react ESlint警告: React Hook useEffect has a missing dependency
一般都是eslint 的检查导致的问题，在useEffect后面加个eslint注释，忽略掉。
useEffect(() => {
你的函数或者一些操作变量的代码
}, []); // eslint-disable-line react-hooks/exhaustive-deps
2).Instance created by useForm is not connect to any Form element.警告
问题原因：
ant design在Modal中使用Form表单，并且通过Form.useForm()， 获取form对象将其挂载到指定的Form表单后仍会出现’Instance created by useForm is not connect to any Form element. Forget to pass form prop’警告这是由于ant design的Modal组件会在Form表单之前创建，因此当页面初始化时form对象会找不到可关联的Form表单，于是出现上述警告
解决办法：
解决办法十分的简单，只要在Modal组件中添加上 getContainer={false}即可。
<modal getcontainer="{false}" title="修改分类" visible="{showStatus" =="=" 2} onok="{handleOk}" oncancel="{()"> setShowStatus(0)}
>
<form form="{form}" onfinish="{onFinish}">
<item name="categoryName">
<input placeholder="请输入分类名称">
</item>
<item>
<button htmltype="submit">提交</button>
</item>
</form>
</modal>
可是这还解决不了问题，报警告还是一样。
可以使用这个api解决 —— forceRender
设置强制渲染给为true
 <modal title="发布" visible="{visible}" onok="{handleOk}" oktext="发布" canceltext="取消" oncancel="{handleCancel}" confirmloading="{confirmLoading}" forcerender="{true}">   
                <p>666</p>
 </modal>
3).Type ‘string | string[]’ is not assignable to type ‘string | undefined’.
解决方法：加类型断言（值 as 类型）
typescript类型断言知识点： “类型断言更像是类型的选择，而不是类型转换”。。
使用类型断言有两种方式：
<类型>值
// 或者
值 as 类型</类型>
4.antd UI开发实践
1).antd 中 Tooltip 和 Popover 组件传图
需求：当鼠标 hover 一个 icon 的时候展示一张图片
}>
hover me
圆形头像UI，示例代码
头像UI：1.普通登录显示头像 2.单点登录显示头像 3.圆形头像 4.头像为空时设置默认头像 5.圆形边框 6.鼠标进入显示大图（鼠标点击时隐藏）
import { Space, Menu, Dropdown, Popover } from "antd";
import { useHistory } from "react-router-dom";
import { unLogin } from "../../api/Login/api";
// import { BellOutlined, LogoutOutlined } from "@ant-design/icons";
import { LogoutOutlined } from "@ant-design/icons";
import "./index.css";
import bg from "../../util/images/u59.jpg";
import { useState } from "react";
const Logout = () => {
const [visible, setVisible] = useState(false);
const history = useHistory();
const name = localStorage.getItem("user_name");
let imgUrl = localStorage.getItem("user_imgUrl");
// 头像为空时设置默认头像
if(imgUrl === null || imgUrl === undefined || imgUrl === ''){
imgUrl = bg;
}
const handleLogout = () => {
unLogin({}).then(() => {
window.localStorage.clear();
history.replace("/login");
});
};
const menu = (
} onClick={handleLogout}>
退出登录
);
// 鼠标进入显示大图
const handleImgMouseEnter = () => {
console.log("handleImgMouseEnter");
setVisible(true);
};
// 鼠标离开隐藏大图
const handleImgMouseLeave = () => {
console.log("handleImgMouseLeave");
setVisible(false);
};
// 点击时隐藏气泡卡片
const handleClick = () => {
setVisible(false);
};
return (
} visible={visible}> // 气泡图片
{name}
);
};
export default Logout;
5.TypeScript编程实践
1）提取数组对象中的某一些属性组成新数组
场景 ：批量新增的时候后台接收的数组对象只需要一两个参数的信息，antd table的多选会把整行的信息带进来
let arrnew = selectedRows.map((item,index) => {
return Object.assign({},'group_Dr':item.group_Dr,"mapInterface_Dr":item.mapInterface_Dr})
})
Original: https://blog.csdn.net/dong123ohyes/article/details/120044248
Author: 爱上的云
Title: 前端项目代码学习笔记
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/661085/
转载文章受原作者版权保护。转载请注明原作者出处！