Javascript 在reactJs中使用id滚动到特定div，而不使用任何其他库

在react中使用id滚动到特定的div，而不使用任何其他库，我发现了一些他们使用滚动库的解决方案

以下是我的WrappedQuestionFormFinal组件中的div代码

 <div className="form-section">
            <Row>
              <Col xs={24} xl={4} className="form-section-cols">
                <h3 id={id}>
                  {t('QUESTION')} {t(id + 1)}
                </h3>
              </Col>
             </Row>
 </div>

{t（'QUESTION'）}{t（id+1）}

这是一个通过这个组件调用的嵌套组件

      <WrappedQuestionFormFinal
        allQuestions={questions}
        updateScreenTitle={this.props.updateScreenTitle}
        handleDeleteQuestion={this.handleDeleteQuestion}
        question={questions[q]}
        dublicateQuestion={dubQuestion}
        dependantQuestion={dependant}
        id={i}
        key={i}
        tags={this.props.tags}
        changeOrder={this.changeOrder}
        changeScreenNo={this.changeScreenNo}
      />,

，

---

我面临的问题是，这个表单有大约10个问题，如果出现错误时提交，我必须滚动出现错误的页面。Id被赋予唯一的h1标记

您是否尝试使用Ref

 constructor(props) {
  super(props);
  this.myRef = React.createRef();
}

handleScrollToElement(event) {
  if (<some_logic>){
    window.scrollTo(0, this.myRef.current.offsetTop);
  }
}

render() {

  return (
    <div>
      <div ref={this.myRef}></div>
    </div>)
}

构造函数（道具）{
超级（道具）；
this.myRef=React.createRef（）；
}
handleScrollToElement（事件）{
如果（）{
滚动到（0，this.myRef.current.offsetTop）；
}
}
render（）{
返回(
)
}

我使用react ref和来实现这一点

class App extends Component {
  constructor(props) {
    super(props);
    this.scrollDiv = createRef();
  }

  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <button
          onClick={() => {
            this.scrollDiv.current.scrollIntoView({ behavior: 'smooth' });
          }}
        >
          click me!
        </button>
        <h2>Start editing to see some magic happen!</h2>
        <div ref={this.scrollDiv}>hi</div>
      </div>
    );
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.scrollDiv=createRef（）；
}
render（）{
返回(
你好，代码沙盒
{
this.scrollDiv.current.scrollIntoView（{behavior:'smooth'}）；
}}
>
点击我！
开始编辑，看看神奇的发生！
你好
);
}
}

---

下面的示例演示了单击按钮并将元素滚动到视图中。

这似乎只适用于作为同一组件的一部分呈现的div。对于其他组件中的div，页面只会刷新。

if（）{

如何通过单击另一个元素来滚动到一个元素？