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

我正在从此条件获取ID，并将其传递给上述函数并使用scrollTo函数。

Answer 1

要滚动到某个元素，您需要该元素的引用。

transform(df, col2 = c(col1[-1]/col1[-nrow(df)], NA))

然后在您的函数中

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

但是没有引用这种方法，而是使用引用来充分利用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" });
};

使用该项目的ID滚动到特定项目？

2 个答案: