querySelector方法的.current属性指的是什么

Question

我在https://usehooks.com，

document.querySelector('body').current

我在规范中根本找不到.current。我希望有人能在这种背景下澄清它的目的。

在下面的完整示例中，它正在IntersectionObserverAPI中使用——也许API正在公开该属性？

非常感谢您的帮助。提前谢谢。

---

以下是完整的源代码：

import { useState, useEffect, useRef } from 'react';
// Usage
function App() {
// Ref for the element that we want to detect whether on screen
const ref = useRef();
// Call the hook passing in ref and root margin
// In this case it would only be considered onScreen if more ...
// ... than 300px of element is visible.
const onScreen = useOnScreen(ref, '-300px');
return (
<div>
<div style={{ height: '100vh' }}>
<h1>Scroll down to next section 👇</h1>
</div>
<div
ref={ref}
style={{
height: '100vh',
backgroundColor: onScreen ? '#23cebd' : '#efefef'
}}
>
{onScreen ? (
<div>
<h1>Hey I'm on the screen</h1>
<img src="https://i.giphy.com/media/ASd0Ukj0y3qMM/giphy.gif" />
</div>
) : (
<h1>Scroll down 300px from the top of this section 👇</h1>
)}
</div>
</div>
);
}
// Hook
function useOnScreen(ref, margin = '0px') {
// State and setter for storing whether element is visible
const [isIntersecting, setIntersecting] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
// Update our state when observer callback fires
setIntersecting(entry.isIntersecting);
},
{
rootMargin: margin,
root: document.querySelector('body').current
}
);
if (ref.current) {
observer.observe(ref.current);
}
return () => {
observer.unobserve(ref.current);
};
}, []); // Empty array ensures that effect is only run on mount and unmount
return isIntersecting;
}

Answer 1

document.querySelector('body').current只是body元素的一个属性，与document.querySelector无关。它可能是在其他地方设置的，因为它不是body元素的现有属性。

var body = document.querySelector("body");
console.log("body.current:", "body.current");
body.current = "SOMEVALUE";
console.log("After setting body.current");
console.log("body.current:", "body.current");

Answer 2

很抱歉让人失望，但它没有任何作用。这只是将undefined提供给IntersectionObserverAPI的一种方式。如果用undefined替换document.querySelector('body').current，或者完全删除整个root字段，仍然会得到相同的结果。

我删除了那个字段来测试它，以验证相同的行为。在这里的Codesandbox链接中自己尝试一下。

从这个例子的评论中可以看出，它可以完全删除：

您可以完全删除根，因为它默认为视口(也可以是document.querySelector('body'(.current始终未定义，可以是document.body，但无论如何都不需要(