在反应中使用该项目的 ID 滚动到特定项目？

Question

我试图滚动到特定的行项目以使用该项目的 ID 做出反应。 我有特定行的 ID，但无法移动到那里。

goToViolation=(id)=>{
  const violation = id ; 
  window.scrollTo({
    top:violation.current.offsetTop,
    behavior:"smooth"});
};

 if (isDrillDown) {
        isRowSelected = index === rowIndex % 20;
       if(isRowSelected){
        this.goToViolation(row.id);
       }
      }

1. 我正在从这个 Condition 获取 ID，我将它传递给上面的函数并使用 scrollTo 函数。

Answer 1

为了滚动到一个元素，您需要该元素的 ref。

<div onClick={this. goToViolation("row-id")} id="row-id"></div>

然后在你的函数中

goToViolation=(id)=>{
  const violation = document.getElementById(id); 
  window.scrollTo({
    top:violation.current.offsetTop,
    behavior:"smooth"
`});
};

但是这种方法没有被引用，而是使用 refs 来充分利用 react 的好处。

Answer 2

我同意@MuhammadAsad 的观点，即直接操作 DOM 不是 React 的方式。

相反，您可以使用useRef钩子并将 ref 传递给您的 JSX 元素。

之后，您可以从.current属性中收集 DOM 引用。

然后你可以做

**your ref**.current.scrollIntoView({ behavior: "smooth", block: "start" });

例子，

你的变量声明。

const violationRef = useRef(null);

您要滚动到的 JSX 元素。

<div ref={violationRef} ></div>

您的按钮将绑定 onClick 事件。

<button onClick={goToViolation} />

你的处理函数

const goToViolation=(id)=>{
  violationRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
};