Question

当您不了解 React 方法时，过去很简单的事情就非常复杂。

我试图创建一个组件，使其在到达页面顶部时像一个粘性的页眉或页脚。

此刻，我很满足于添加以下内容：

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

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

但是，我遇到了如何获得样式化组件的滚动顶部位置的问题。所以可以说我有一个名为Container的样式化组件，并且输出了一个表单，我通常只需添加一个data属性并执行以下操作：

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

我将如何在React中做到这一点？

更新

现在使用ref。我陷入了一个问题，其中未定义电流：

  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

在反应中，您将使用组件的引用：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} />;
  }
}

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

Answer 2

另一个选择是使用innerRef。这样会更好，因为它将为您提供对DOM节点的引用，而不仅仅是包装。参见此answer。

您将可以直接访问诸如scrollTop之类的属性。

与ref不同，innerRef使用回调：

对于您而言，它看起来像：

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.myRef;
  }

  getOffset = () => {
    console.log(this.myRef.offsetTop);  
  }

  render() {
    return <Container
        innerRef={element => this.textInput = element}
        onClick={this.getOffset} />;
  }
}

Answer 3

您可以添加参考到您要为其设置offsetTop的组件。该参考将具有该组件的所有已计算css值。

React-如何获得样式化组件的最高位置？

更新

3 个答案: