javascript - 引用外部类中的 div

Question

我有一个可滚动的 div，我想从类(class)外部引用该 div。例如

const myDiv = document.getElementById('scrollDiv');

class Test extends React.Component{

  listenScrollEvent = (e) => {
    console.log("myDiv returns undefined",myDiv);
  };

  render(){
   return (
    <div id="scrollDiv" onScroll={this.listenScrollEvent.bind(this)}></div>
  )
  }
}

在listenScrollEvent内，我想访问myDiv，它引用了id为scrollDiv的div。但我在控制台日志中收到一个 undefined 值。我可以在我的 listenScrollEvent 方法中使用 const myDiv = document.getElementById('scrollDiv'); 但每次滚动时都会发生引用 div 的情况。

Answer 1

您可以像这样在 React 中使用 refs 来访问元素 -

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.ref = null;
  }
  listenScrollEvent = () => {
    console.log(this.myRef.getBoundingClientRect().top);
  };
  render() {
    return (
      <button
        ref={my => (this.myRef = my)}
        id="scrollDiv"
        onScroll={this.listenScrollEvent}
      >
        Click Me!
      </button>
    );
  }
}

更多关于引用文献 - https://reactjs.org/docs/refs-and-the-dom.html