带有多个引用的Reactjs滚动

Question

我对reactjs中的引用有疑问。 抱歉，这很蠢，但我仍在学习。 好吧，问题是我试图滚动以使用ref做出反应，但我的问题是因为我想使用多个引用。

我的代码是这样的：

import React, { Component } from "react";
import './App.css';
import { Row, Col,Image,ListGroup,Button,Jumbotron,Container} from 'react-bootstrap';



class App extends Component {

  constructor(props) {
    super(props)
    this.myRef = React.createRef()
    this.myRef2 = React.createRef()    // Create a ref object 
}


handleOnClick = (event) => {
  //.current is verification that your element has rendered

  window.scrollTo(2, this.myRef2.current.offsetTop) 
}


  render() {


    return (
    <div className="App">
             <button onClick={this.handleOnClick}>Click me</button>

      <Row>
        <Col className="menu text-center" lg ={4}>

          <div className="picture" >
            <Image src={process.env.PUBLIC_URL + '/Images/picture.jpg'} roundedCircle />
          </div>

          <h1 className="menu-name">Carlos Deseda</h1>

          <h4 className="menu-office">Software Engineer - Web Developer</h4>

          <div>
          <Row>
              <Col lg= {3}></Col>
              <Col lg= {6} className="menu-text">
                <ListGroup >
                  <ListGroup.Item>ABOUT</ListGroup.Item>
                  <ListGroup.Item>WORK EXPERIENCE</ListGroup.Item>
                  <ListGroup.Item>EDUCATION</ListGroup.Item>
                  <ListGroup.Item>SKILLS </ListGroup.Item>
                  <ListGroup.Item>CONTACT</ListGroup.Item>
                </ListGroup>
              </Col>
              <Col lg= {3}></Col>
            </Row>
          </div>

        </Col>

        <Col className="info text-center" lg ={8}>

  <div className="ref1" ref={this.myRef}> FirtsOne </div>
  <div className="ref2" ref={this.myRef2}>SecondOne</div>



        </Col>

      </Row>

    </div>

  )}
}

export default App;

有了这个

this.myRef = React.createRef()

this.myRef2 = React.createRef()

我可以更改div的值并正常工作，但是我想知道是否可以像数组那样仅将这两个对象react.createRef()一个react.createRef() 。 谢谢你的帮助！！

Answer 1

与其创建ref像，

this.myRef = React.createRef()

您可以在构造函数中定义一个空数组，

constructor(props) {
    super(props)
    this.myRef = [];
}

现在，您可以使用callback ref模式创建ref ，

<div className="ref1" ref={(ref) => { this.myRef[0] = ref }}> FirtsOne </div>
<div className="ref2" ref={(ref) => { this.myRef[1] = ref }}>SecondOne</div>

要滚动，您可以使用scrollIntoView ，

handleOnClick = (event) => {
  //.current is verification that your element has rendered
  console.log(this.myRef[1]);
  this.myRef[1].scrollIntoView(); 
}

演示