英文:

Why I take 'Expected 1 arguments, but got 2.' error of IntersectionObserver?

问题

Here is the translated content:

我将一段代码（来自 https://react.dev/reference/react/useEffect#usage）转换为 TypeScript，如下所示：

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'
    }} />
  );
}

在 observer.observe(div, { threshold: 1.0 }); 部分，我遇到了一个错误：
> 预期 1 个参数，但得到了 2 个。

我使用 npm create vite@latest 创建了 TypeScript + React 项目，这是我的 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"
}
}

Please note that I've translated the code and package.json, excluding the request for translation.

<details>
<summary>英文:</summary>

I converted a code (from https://react.dev/reference/react/useEffect#usage) to TypeScript like:

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'
}} />
);
}

And in the `observer.observe(div, { threshold: 1.0 });` part I took an error: 
> Expected 1 arguments, but got 2.

I created TypeScript + React with npm create vite@latest and here is my 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"
}
}

</details>


# 答案1
**得分**: 3

你可以将[选项](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#syntax)作为[`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)的第二个参数传递。

&gt; 新 IntersectionObserver(callback, options)

```const observer = new IntersectionObserver(entries =&gt; {
      const entry = entries[0];
      if (entry.isIntersecting) {
        document.body.style.backgroundColor = &#39;black&#39;;
        document.body.style.color = &#39;white&#39;;
      } else {
        document.body.style.backgroundColor = &#39;white&#39;;
        document.body.style.color = &#39;black&#39;;
      }
}, {
  threshold: 1.0
});

observer.observe(div)```

<details>
<summary>英文:</summary>

You can pass [options](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#syntax) as the second argument of [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)

&gt; new IntersectionObserver(callback, options)

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

observer.observe(div)

</details>