在不使用任何其他库的情况下，在 reactJs 中使用 id 滚动到特定的 div

Question

在不使用任何其他库的情况下使用 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>

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

      <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 标签，它是唯一的

Answer 1

您尝试过使用 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>)
}

Answer 2

我使用 react ref 和 element.scrollIntoView 来实现这一点。

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

这是一个示例 codesandbox，演示了单击按钮并将元素滚动到视图中。

在不使用任何其他库的情况下，在 reactJs 中使用 id 滚动到特定的 div

Scroll to a particular div using id in reactJs without using any other library

javascript

dom

scroll

reactjs

react-component