使用IntersectionObserver遇参数错误：期望1个参数却传入2个

我通过npm create vite@latest创建了TypeScript + React项目，将React官网的useEffect示例代码转换为TypeScript后，调用observer.observe(div, { threshold: 1.0 });时出现错误提示：

Expected 1 arguments, but got 2.

我的代码如下：

function Box() {
  const ref = useRef(null);

  React.useEffect(() => {
    const div = ref?.current;
    const observer = new IntersectionObserver(entries => {
      const entry = entries[0];
      if (entry.isIntersecting) {
        document.body.style.backgroundColor = 'black';
        document.body.style.color = 'white';
      } else {
        document.body.style.backgroundColor = 'white';
        document.body.style.color = 'black';
      }
    });
    observer.observe(div, {
      threshold: 1.0
    });
    return () => {
      observer.disconnect();
    }
  }, []);

  return (
    <div ref={ref} style={{
      margin: 20,
      height: 100,
      width: 100,
      border: '2px solid black',
      backgroundColor: 'blue'
    }} />
  );
}

package.json配置：

{
  "name": "react-tutorial",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.59.0",
    "@typescript-eslint/parser": "^5.59.0",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "typescript": "^5.0.2",
    "vite": "^4.3.9"
  }
}

这个错误的核心是**IntersectionObserver.observe()方法仅接受目标元素这1个参数**，你误把配置项传递给了observe，正确做法是在创建IntersectionObserver实例时传入配置项。

修改后的完整代码：

import { useRef, useEffect } from 'react';

function Box() {
  // 给useRef指定明确的HTMLDivElement类型，避免类型推断模糊
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const div = ref.current;
    // 增加空值判断，防止DOM未挂载时执行报错
    if (!div) return;

    // 将threshold配置移到IntersectionObserver的第二个参数位置
    const observer = new IntersectionObserver(entries => {
      const entry = entries[0];
      if (entry.isIntersecting) {
        document.body.style.backgroundColor = 'black';
        document.body.style.color = 'white';
      } else {
        document.body.style.backgroundColor = 'white';
        document.body.style.color = 'black';
      }
    }, { threshold: 1.0 });

    // observe仅传入目标元素div
    observer.observe(div);
    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <div ref={ref} style={{
      margin: 20,
      height: 100,
      width: 100,
      border: '2px solid black',
      backgroundColor: 'blue'
    }} />
  );
}

export default Box;

额外优化说明：

• 给useRef添加HTMLDivElement类型标注，让TypeScript明确ref指向的元素类型
• 增加div的空值校验，避免组件初始化时ref还未绑定DOM元素导致的报错
• 解构导入useRef和useEffect，代码更简洁

内容的提问来源于stack exchange，提问作者Carasidelt