在 React.js 中的 setState 之后自动滚动到呈现的元素

Question

假设我在页面顶部的列表项上有一些 setState 声明，如下所示：

<DropdownMenu >
    <DropdownItem className="channel-setting__btn"
      onClick={() => this.setState({ facebookFields: true, youtubeFields: true })}>All</DropdownItem>

    <DropdownItem
      className="channel-setting__btn"
      onClick={() => this.setState({ facebookFields: true, youtubeFields: false })}>Facebook
    </DropdownItem>

    <DropdownItem
      className="channel-setting__btn"
      onClick={() => this.setState({ facebookFields: false, youtubeFields: true })}>Youtube
    </DropdownItem>

</DropdownMenu>

有什么方法可以让我在点击 DropDownItem 时，无论 DOM 元素呈现什么，页面都会自动平滑滚动到该部分或元素呈现在页面上的任何位置，在这种情况下，元素是 facebook 和 youtube 的不同形式，它们将呈现在最后并且太接近页面的末尾。

Answer 1

您可以使用scrollIntoView函数 after 之后componentDidUpdate立即调用render。

这是一个使用要滚动到的元素的 ID 的版本。您还可以存储refs元素的 ，并按照推荐的方式进行操作。（无论如何你都没有修改DOM）

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      media: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      media: event.target.value
    });
  }
  componentDidUpdate() {
    const element = document.getElementById(this.state.media);
    
    element.scrollIntoView({behavior: 'smooth'});
  }
  render() {
    return (
      <main>
        <select value={this.state.media} onChange={this.handleChange}>
          <option value="facebook">Facebook</option>
          <option value="youtube">Youtube</option>
        </select>
        <p id="facebook" className="social-media">Facebook</p>
        <p id="youtube" className="social-media">Youtube</p>
      </main>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

.social-media {
  height: 100vh;
}

#facebook {
  margin-top: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

您可能要检查浏览器的支持scrollIntoView和包括填充工具。