Question

我通过https://usehooks.com上的一段代码碰到了这段代码，

document.querySelector('body').current

我在规范中根本找不到.current。我希望有人可以在这种情况下阐明其目的。

在完整示例（如下）中，它正在IntersectionObserver API中使用-也许该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 API提供IntersectionObserver的一种方式。如果将document.querySelector('body').current替换为undefined或完全删除整个root字段，您仍然会得到相同的结果。

我删除了该字段以对其进行测试以验证相同的行为。在Codesandbox链接here中自己尝试。

如示例中的this comment所示，可以将其完全删除：

由于根目录仍默认为视口，因此您可以完全删除根目录（也为document.querySelector（'body'）。current始终未定义，可以为document.body，但仍然不需要）

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

2 个答案: