本文旨在解决 React 应用中使用 useState 管理锚点元素时，遇到的“Node cannot be found in the current page”错误。通过分析问题原因和提供解决方案，帮助开发者避免类似错误，确保组件的正确渲染和交互。问题通常由于组件内部定义样式组件导致，将其移至组件外部即可解决。
在使用 React 开发过程中，我们经常需要获取 DOM 元素的引用，并将其存储在 state 中，以便后续操作，例如弹出菜单的定位。然而，在某些情况下，直接将 DOM 元素存储到 state 中可能会导致一些意想不到的问题，例如“Node cannot be found in the current page”的错误。下面我们将分析这个问题的原因，并提供解决方案。
问题描述
在鼠标悬停在一个元素上时，我们希望获取该元素的锚点，并将其存储在 state 中，以便后续弹出菜单的定位。然而，当我们尝试使用 useState 来更新 state 中的锚点元素时，控制台却报错，提示“Node cannot be found in the current page”。
问题原因
这个问题通常是由于在 React 组件内部定义了样式组件（例如使用 styled-components 创建的组件）引起的。当样式组件在组件内部定义时，每次组件重新渲染，都会创建一个新的样式组件实例。这意味着，即使是同一个逻辑元素，在不同的渲染周期中，其对应的 DOM 节点也会发生变化。
当我们尝试将 event.currentTarget 存储到 state 中时，实际上存储的是一个指向旧 DOM 节点的引用。当组件重新渲染后，旧的 DOM 节点被销毁，新的 DOM 节点被创建。此时，state 中存储的旧 DOM 节点引用就失效了，导致“Node cannot be found in the current page”的错误。
解决方案
解决这个问题的关键在于确保样式组件只被创建一次，而不是在每次组件渲染时都重新创建。最常见的解决方案是将样式组件的定义移到 React 组件外部。
以下是修改后的代码示例：
import styled from 'styled-components';
// 将 StyledHeader 的定义移到组件外部
const StyledHeader = styled.div`
/* 你的样式 */
`;
function MyComponent() {
const [form, setForm] = React.useState({ anchor: null, id: null });
function handlePopup(event, id) {
const target = { ev: event.currentTarget };
console.log(target);
setForm({ anchor: event.currentTarget, id: id });
}
return (
<StyledHeader
onMouseEnter={(ev) => {
ev.preventDefault();
handlePopup(ev, 123); // 假设 id 为 123
}}
>
悬停在此处
</StyledHeader>
);
}
export default MyComponent;代码解释
- 样式组件外部定义： 将 StyledHeader 的定义从 MyComponent 组件内部移到了组件外部。这样，StyledHeader 组件只会被创建一次，而不是在每次 MyComponent 渲染时都重新创建。
- handlePopup 函数： handlePopup 函数保持不变，它负责获取 event.currentTarget 并将其存储到 form state 中。
总结
当在 React 中使用 useState 管理 DOM 元素引用时，需要特别注意样式组件的定义位置。如果样式组件在组件内部定义，可能会导致 DOM 节点引用失效，从而引发“Node cannot be found in the current page”的错误。将样式组件的定义移到组件外部可以有效解决这个问题。
注意事项
- 确保你的样式组件只被创建一次。
- 避免在组件内部定义样式组件。
- 如果需要动态改变样式，可以使用 CSS variables 或 props 来控制样式组件的渲染。
通过理解问题的原因和应用正确的解决方案，可以避免在使用 React 开发过程中遇到类似的问题，提高开发效率和代码质量。
