为什么这没有按预期工作？有时它可以工作，有时却不能-我无法弄清楚这一点。ScrollIntoView这段代码是从另一个页面的另一个js文件中复制的，在那个代码中，它工作正常吗？IDrefTP和refPP可以在ReferencesPP和中的div标签中找到ReferencesTP
import React, {useState} from 'react'
import ReferencesPP from './referencesPP'
import ReferencesTP from './referencesTP'
import "./references.css"
function ReferencesPage(){
const reftp = document.getElementById("refTP");
const refpp = document.getElementById("refPP");
const [page, setPage] = useState(false);
const handleClick = (id) => {
if(id === 0 && page===true){
reftp.scrollIntoView({ behavior: "smooth" });
setPage(false);
} else if(id === 1 && page===false){
refpp.scrollIntoView({ behavior: "smooth" });
setPage(true);
}
}
return(
<div className="references-main-container">
<ul>
<li id="anchor1" onClick={()=>handleClick(0)}></li>
<li id="anchor2"onClick={()=>handleClick(1)}></li>
</ul>
<ReferencesTP />
<ReferencesPP />
</div>
)
}
export default ReferencesPage
它最初不起作用，因为到您的组件函数运行时，尚无任何元素。如果有一些顺序的渲染，它就可以工作，因为那时有一些元素。但是，这样做仍然是错误的方法。从react访问DOM应该被认为是副作用，并且在纯函数中不能有副作用（并且您的组件是纯函数。
在功能性React组件中，您可以通过几种方法解决副作用。钩子是这种方法之一（通常是最好的方法）。如果要存储一些可变数据（作为DOM元素），则最好使用useRef钩子。这样，React会将ref设置为DOM元素，并且可以通过引用将其传递到事件处理程序中。您仍然需要检查元素是否确实存在，但是getElementById您也应该这样做。
我做了一些小提琴供您查看，如何使用参考案例。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句