React react-scroll-to（滚动到 Ref 不起作用）

Question

我想在单击按钮时平滑滚动到特定参考。我正在尝试使用 'react-scroll-to' 有一个关于滚动到 ref 的文档，我试图在此处找到解决方案 Whosebug & github 问题。但我找不到合适的解决方案。请帮我解决这个问题。

提前致谢！

我这里准备了codesandbox https://codesandbox.io/s/react-scroll-to-ref-nwpq2?file=/src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { ScrollTo } from 'react-scroll-to'

import './styles.css'

class Child1 extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.scrollTo}>Scroll</button>
      </div>
    )
  }
}

class Child2 extends React.Component {
  render() {
    return (
      <div style={{ height: '500px', backgroundColor: 'blue' }}>Child 2</div>
    )
  }
}

class Example extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
  }
  render() {
    return (
      <div className="App">
        <h1>Index Component</h1>
        <ScrollTo>
          {({ scrollTo }) => {
            console.log(this.myRef)
            return (
              <Child1
                scrollTo={() =>
                  scrollTo({
                    ref: this.myRef,
                    // y: 100,
                    smooth: true
                  })
                }
              />
            )
          }}
        </ScrollTo>
        <Child2 />
        <div
          ref={this.myRef}
          style={{ height: '500px', backgroundColor: 'black' }}
        >
          Hello
        </div>
      </div>
    )
  }
}

const rootElement = document.getElementById('root')
ReactDOM.render(<Example />, rootElement)

Answer 1

我认为您误解了 scrollTo 的 ref 属性是如何工作的。 Ref 告诉 scrollTo 函数滚动哪个元素，而不是滚动到哪个元素。为了证明这一点，我对您的沙箱进行了分叉并对其进行了一些编辑：https://codesandbox.io/s/react-scroll-to-ref-nl6yz

我会尝试使用 React 内置方法而不是这个库。这已在此处解释：

Answer 2

正如@sava 提到的，我误解了 scrollTo 的 ref 属性是如何工作的。顺便说一下，根据@sava 的回答，我刚刚将我的 codesandbox 修复为滚动到底部 ref 的 offsetTop 并且它运行顺利。

              <Child1
                scrollTo={() =>
                  scrollTo({
                    y: this.myRef.current.offsetTop,
                    smooth: true
                  })
                }
              />

https://codesandbox.io/s/react-scroll-to-ref-nwpq2?file=/src/index.js

React react-scroll-to（滚动到 Ref 不起作用）

React react-scroll-to (scroll to Ref not working)

javascript

scroll

ref

reactjs