react-scroll库注册不必要window对象属性的问题咨询

问题原因 #

你遇到的现象并非react-scroll库的bug，而是浏览器的默认行为：当DOM元素的id属性值是合法的JavaScript标识符（即符合变量命名规则：无特殊字符、非关键字、不以数字开头等）时，浏览器会自动将该DOM元素挂载到window对象上，以id值作为属性名。

比如你设置id="jQuery"，浏览器会创建window.jQuery并指向该DOM元素，这会直接覆盖你引入的jQuery库，导致库失效。react-scroll的<Element/>组件只是将你传入的id透传给了底层的DOM元素，因此触发了这个浏览器机制。

解决方案 #

无需禁用浏览器的这个默认行为（也没有全局可靠的禁用方式），通过以下方式即可规避问题：

1. 仅使用name属性，不传递id #

react-scroll的滚动定位逻辑核心依赖name属性，而非id。如果你不需要用这个id做其他DOM操作（比如通过getElementById获取元素），完全可以只传name：

import { Element } from 'react-scroll'
import { useState, useEffect } from 'react'

function App() {
    const [data, setData] = useState([])

    useEffect(() => {
        setData([
            {'id': 1, 'name': 'JavaScript'},
            {'id': 2, 'name': 'jQuery'}
        ])
    }, [])

    return (
        <div className="App">
            {data && data.map(item => 
                <Element name={item.name} key={item.id}>
                    {item.name} {item.name}
                </Element>
            )}
        </div>
    );
}

2. 给id添加前缀/后缀，避免与全局变量重名 #

如果确实需要使用id，可以给id添加前缀（比如elem-、scroll-），让其不再是合法的标识符，或者避免与全局库名冲突：

<Element 
    id={`scroll-${item.name}`} 
    name={item.name} 
    key={item.id}
>
    {item.name} {item.name}
</Element>

带连字符的id不会被浏览器挂载为window的属性（因为连字符不是合法的变量名），自然不会覆盖全局库。

3. 使用非标识符格式的id #

比如给id添加下划线、或者让其以数字开头（注意：数字开头的id在CSS选择器中需要转义，使用时需留意）：

<Element 
    id={`${item.name}_elem`} 
    name={item.name} 
    key={item.id}
>
    {item.name} {item.name}
</Element>

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