javascript - 如何在 react 中将组件滚动到底部

Question

我正在尝试解决一个简单的问题:加载组件时，我需要将其滚动到底部。但我浪费了很多时间试图解决它。我尝试了很多不同的方法(scrollIntoView、scrollTop、scrollBy 等)，但没有一个做不到。下面的网址是 fiddle 的链接，其中我有一个简单的组件，我需要显示消息。问题是我必须自己滚动大约 10 个像素。如果您能帮助我解决这个问题，我将非常感激。

class Hello extends React.Component {
  componentDidMount() {
    const elem = ReactDOM.findDOMNode(this.refs.test);

    if (elem) {
      elem.scrollIntoView(false);
    }
  }

  render() {
    return (
      <div>
        <div className="test" 
             ref="test">
             Hello {this.props.name}
        </div>
        <div>Message</div>
      </div>
    )
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

JSFiddle

Answer 1

您将 ref 属性放置在错误的位置。

将其向上移动一级以捕获整个组件，包括“消息”文本。

所以，基本上:

class Hello extends React.Component {
  // ...

  render() {
    return (
      <div ref="test">
        <div className="test">
             Hello {this.props.name}
        </div>
        <div>Message</div>
      </div>
    )
  }
}

这是一个working jsfiddle demo ，从你的 fork 出来。