javascript - React - 如何获得样式化组件的顶部位置？

Question

当您不了解React 方式时，以前很简单的事情会变得相当复杂。

我正在尝试创建一个组件，使其在到达页面顶部时充当粘性页眉或页脚。

目前我很满足于添加以下内容:

  componentDidMount() {
    window.addEventListener('scroll', this.onScroll, false);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.onScroll, false);
  }

但是，我在如何获得样式化组件的滚动顶部位置方面遇到了瓶颈。假设我有一个名为 Container 的样式化组件，它输出了一个表单，我通常只添加一个数据属性并执行如下操作:

const container = document.getElementbyTag("data-sticky-container")
const position = container.offsetTop 

我将如何在 React 中执行此操作？

---

更新

现在使用 ref。我遇到了一个没有定义 current 的问题:

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

  componentDidMount() {
    window.addEventListener('scroll', this.onScroll, false);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.onScroll, false);
  }

  onScroll() {
    console.log(this.optionBox.current.offsetTop);
  }

Answer 1

在 React 中，您将为您的组件使用一个引用:https://reactjs.org/docs/refs-and-the-dom.html

你会得到这样的东西:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  getOffset = () => {
    console.log(this.myRef.current.offsetTop);  
  }
  render() {
    return <Container ref={this.myRef} onClick={this.getOffset} />;
  }
}

现在您可以在 onScroll 函数内通过 this.myRef.current.offsetTop 访问容器 offsetTop，就像在 getOffset