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

【问题标题】：What does the .current property of the querySelector method refer to?querySelector 方法的 .current 属性指的是什么？
【发布时间】：2018-11-09 03:50:06
【问题描述】：

我通过https://usehooks.com 上的 sn-p 遇到了这行代码，

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;
}

【问题讨论】：

.current 将是结果元素上的一个属性（即 nothing 与 querySelector 无关）......在这种情况下是 body 元素......但是，这也没有任何意义
顺便说一句...不是document.querySelector('body')...只是写document.body的啰嗦方式？
@Bravo 并非总是...您可能在非 HTML 文档中。

标签： javascript reactjs ecmascript-6 react-hooks

【解决方案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");

【讨论】：

【解决方案2】：

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

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

正如this comment 在示例中所看到的，它可以完全删除：

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

【讨论】：