1. react报错-Warning: Instance created by useForm is not connected to any Form element. Forget to pass form prop?
   问题分析
   解决方案
   如果是除了modal嵌套类型出现此种报错，我们可以设置如果组件并未渲染，不要调用form的实例，在外层加一个判断，return里去掉form渲染的代码
   Modal中嵌套Form表单的情况解决方案
   2.监听页面滚动事件，获取页面滚动到哪里了
   解决方案
   3.React 18 + antd 5.8.6 更改主题色-定制主题（4.x修改主题配色请参考第四条）
   解决方案
2. React + antd 4.X 更改主题色-定制主题
   解决方案-配置 less 变量文件
3. React报错ResizeObserver loop completed with undelivered notifications.
   问题分析
   解决方案
4. React designable formily antd form designer 很多cdn.jsdelivr.net资源找不到的问题，cdn.jsdelivr.net访问报错
   问题分析
   解决方案1：
   解决方案2：
   解决方案3：请参考本文第12个问题，有更多处理解决方案详解
   7.React onClick事件无法传参 不管用 或者报错
   解决方案
   8.React报错Property 'pathname' is missing in type '{ children: Element; }' but required in type '
   解决方案1
   解决方案2 （不建议这么做）
   解决方案3 （不建议这么做）
   9.React报错Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes & ITextWidgetProps'.
   解决方案（这个有待验证，如果没有用，请留言）
5. 多种方案教你 React页面传参
   方案1：使用useNavigate 和 useLocation进行页面传参
   点击按钮携带参数跳转逻辑
   获取参数传递内容逻辑
   方案2 使用useNavigate 和 useSearchParams 进行页面传参
6. React 中 window.scrollTo函数不管用是怎么回事？如何解决React中滚动顶部不管用的问题？
   问题分析
   解决方案
   CSS
   TSX
7. cdn.jsdelivr.net下载失败的多种处理方案， formily @designable/react-settings-form下载https://cdn.jsdelivr.net/npm/monaco-editor@0.36.1/min/vs/loader.js报错失败异常处理解决方案
   解决方案1 有的依赖不是写死的，比如这个
   我们就可以采用下面方式解决
   比如下面这个monaco-editor/loader提供了这种方式解决
   解决方案 2 如果文件是写死的
   搜索包文件后发现这个文件名是写死的
   将@monaco-editor从node_modules复制到我们的项目目录下
   批量替换
   大功告成
   13.The package "@esbuild/win32-x64" could not be found, and is needed by esbuild.
   解决方案
8. vite突然不热更新了怎么办？？？10秒钟解决Vite hmr热更新失效BUG
   解决方案
   15.最近在使用 react + antd 进行前端项目开发，开发过程中遇到了这些报错
   报错1： Each child in a list should have a unique “key“ prop.Check the render method of Cell.
   报错图示
   解决方案：
9. Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons
   17.待补充
   今天就写到这里啦~
   欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

10. react报错-Warning: Instance created by useForm is not connected to any Form element. Forget to pass form prop?
    当前使用版本

    "@designable/core": "^1.0.0-beta.45",
    "@designable/formily-antd": "^1.0.0-beta.45",
    "@designable/react-settings-form": "^1.0.0-beta.45",
    "@formily/antd": "^2.2.29",
    "@ice/runtime": "^1.0.0",
    "antd": "^4.22.8",
    问题分析
    当页面初始化时form对象找不到可关联的Form表单，出现上述警告，我们需要设置根据visible来设置表单

解决方案
如果是除了modal嵌套类型出现此种报错，我们可以设置如果组件并未渲染，不要调用form的实例，在外层加一个判断，return里去掉form渲染的代码
Modal中嵌套Form表单的情况解决方案
const useResetFormOnCloseModal = ({ form, visible }) => {
const prevVisibleRef = useRef();
useEffect(() => {
prevVisibleRef.current = visible;
}, [visible]);
const prevVisible = prevVisibleRef.current;
useEffect(() => {
if (!visible && prevVisible) {
form.resetFields();
}
}, [visible]);
};

const ModalForm = ({ visible, onCancel }) => {
const [form] = Form.useForm();
useResetFormOnCloseModal({
form,
visible,
});

const onOk = () => {
form.submit();
};

return (

2.监听页面滚动事件，获取页面滚动到哪里了
解决方案
参考文档

import React, { useRef } from 'react';
import { useScroll } from 'ahooks';

export default () => {
const ref = useRef(null);

const scroll = useScroll(ref, (val) => val.top > 100 && val.top < 200);

return (
<>

{JSON.stringify(scroll)}

解决方案
碎碎念：其实使用很简单，就是用ConfigProvider包一下你的组件就行了，比4.X版本改色简单多啦~~~~

import { Button, ConfigProvider, Space } from 'antd';
import React from 'react';

const App: React.FC = () => (
<ConfigProvider
theme={ {
token: {
// Seed Token，影响范围大
colorPrimary: '#00b96b',
borderRadius: 2,

    // 派生变量，影响范围小
    colorBgContainer: '#f6ffed',
  },
}}

>

Primary
Default


);

1. React + antd 4.X 更改主题色-定制主题
   解决方案-配置 less 变量文件
   在项目入口的index.less引入并写入下面代码来更改主题，建立一个单独的 less 变量文件，引入这个文件覆盖 antd.less 里的变量

@import '~antd/es/style/themes/default.less';
@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
// 下面是你的自定义主题颜色
@primary-color: rgb(201, 75, 24); // primary color for all components
@link-color: rgb(201, 75, 24); // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 2px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers

1. React报错ResizeObserver loop completed with undelivered notifications.
   ResizeObserver loop completed with undelivered notifications.
   at handleError (http://localhost:3000/js/main.js:2161:58)
   at http://localhost:3000/js/main.js:2180:7

问题分析
antd 的 table 组件容易报这个错误
报错的原因：在页面绘制的时候，页面突然发生调整大小的事件，导致了样式和布局都需要重新评估，这个调整大小导致的布局变化，将延迟到下一帧来绘制。
其他分析感兴趣的小伙伴可以自行查询，这里不做过多解释啦~~
解决方案
简单粗暴解决：所以在报错组件里面，或者全局，添加隐藏这个浮层的样式

//antd组件内 ResizeObserver loop limit exceeded报错隐藏
//代码效果参考：https://vipwb.com/h-j-g-g-z-d-q/49894.html
//代码效果参考：https://vipwb.com/weibao/49896.html
//代码效果参考：https://vipwb.com/shebei/49897.html
//代码效果参考：https://vipwb.com/zhinen/49898.html

webpack-dev-server-client-overlay {

display: none !important;
}

1. React designable formily antd form designer 很多cdn.jsdelivr.net资源找不到的问题，cdn.jsdelivr.net访问报错