在使用 React 开发过程中，我们可能会遇到需要获取 DOM 元素并将其存储在 state 中的情况，以便后续操作，例如弹出层的位置定位。然而，直接将 DOM 元素存储到 state 中，特别是锚点元素，有时会导致 "Node cannot be found in the current page" 错误。本教程将分析导致此问题的原因，并提供解决方案。
问题描述
当我们在 React 组件中使用 useState 来存储锚点元素时，可能会遇到以下情况：
- 在 handlePopup 函数中，我们尝试获取触发事件的 DOM 元素（event.currentTarget），并将其存储到 useState 管理的 form 状态中。
- 控制台输出显示，在 setForm 调用之前，event.currentTarget 指向的 DOM 元素是存在的。
- 但是，一旦调用 setForm 更新状态，再次访问存储在 form.anchor 中的 DOM 元素时，浏览器会提示 "Node cannot be found in the current page"。
问题原因分析
根本原因在于，React 的渲染机制可能导致组件重新渲染，而原始的 DOM 元素在重新渲染后会被新的 DOM 元素替换。因此，存储在 state 中的 DOM 元素引用会失效，导致 "Node cannot be found in the current page" 错误。
更具体地说，问题可能源于在组件内部定义样式组件（例如使用 styled-components）。每次组件渲染时，都会创建新的样式组件，这会导致 React 认为元素发生了变化，从而触发不必要的 DOM 替换。
解决方案
避免在组件内部定义样式组件，将其移到组件外部定义。
以下代码示例演示了如何解决这个问题：
错误示例 (组件内部定义样式组件):
import React, { useState } from 'react';
import styled from 'styled-components';
function MyComponent() {
const [anchorEl, setAnchorEl] = useState(null);
// 错误：在组件内部定义样式组件
const StyledButton = styled.button`
padding: 10px;
background-color: lightblue;
`;
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
return (
<div>
<StyledButton onClick={handleClick}>Click Me</StyledButton>
{anchorEl && <p>Anchor Element Found!</p>}
</div>
);
}
export default MyComponent;正确示例 (组件外部定义样式组件):
import React, { useState } from 'react';
import styled from 'styled-components';
// 正确：在组件外部定义样式组件
const StyledButton = styled.button`
padding: 10px;
background-color: lightblue;
`;
function MyComponent() {
const [anchorEl, setAnchorEl] = useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
return (
<div>
<StyledButton onClick={handleClick}>Click Me</StyledButton>
{anchorEl && <p>Anchor Element Found!</p>}
</div>
);
}
export default MyComponent;代码解释:
- 错误示例: 每次 MyComponent 渲染时，都会创建一个新的 StyledButton 组件，即使它的样式没有改变。这会导致 React 认为按钮元素发生了变化，并触发 DOM 替换。
- 正确示例: StyledButton 在组件外部定义，因此只会被创建一次。这样，React 就可以复用现有的 DOM 元素，避免了 "Node cannot be found in the current page" 错误。
注意事项
- 在定义样式组件时，尽量避免在组件内部定义，特别是频繁渲染的组件。
- 如果必须在组件内部定义样式组件，请确保样式组件的定义是稳定的，不会在每次渲染时都发生变化。可以使用 useMemo 等 hook 来缓存样式组件的定义。
- 在存储 DOM 元素到 state 之前，请考虑是否真的需要存储整个 DOM 元素。如果只需要某些属性，例如位置信息，可以只存储这些属性，而不是整个 DOM 元素。
总结
当在 React 应用中使用 useState 更新锚点元素时遇到 "Node cannot be found in the current page" 错误，需要检查是否在组件内部重复定义了样式组件。将样式组件移到组件外部定义可以有效解决此问题，确保锚点元素在状态更新后依然有效。同时，需要注意避免不必要的 DOM 替换，以提高 React 应用的性能。
