React/Redux - 在服务器端呈现页面后滚动 div

Question

我有一个应用程序在 React 和 Redux 中使用服务器端渲染。

在应用程序中有一个包含在 div 标签内的信息网格。我已将 'ref' 属性附加到它，以便操纵该特定 div.

的滚动条

  render(){
    this.gridPosition()
    return (
      <div className='m_wrap' ref="scrollbars">
        <TimeBar/>
        <ChannelInfo info={this.props} />
      </div>
    )
  }

而 gridPosition 是：

  gridPosition(){
    if (this.props.slidePos == "Morning"){
      this.refs.scrollbars.scrollLeft = 0;
    } else if (this.props.slidePos == "Afternoon") {
      this.refs.scrollbars.scrollLeft = 2880;
    } else if (this.props.slidePos == "Evening") {
      this.refs.scrollbars.scrollLeft = 5280;
    } else if (this.props.slidePos == "Night") {
      this.refs.scrollbars.scrollLeft = 7200;
    }
  }

所以滚动条的位置由this.props.slidePos

决定

这在加载应用程序时有效，但它不会在初始渲染中设置正确的位置。

我已尝试在 componentDidMount() 函数中触发一个操作，但 div 标记在服务器呈现后似乎没有连接到应用程序。

如果有人能阐明这一点或指出正确的方向来解决它，我将不胜感激。

Answer 1

改变 componentDidMount 内的滚动位置是正确的方法。当您收到在服务器端呈现的初始 html 时的事件 React 将在客户端呈现您的应用程序（ReactDOM.render(....) 仍在此处并被调用）并将进行比较结果校验和。如果它们不匹配，React 将用刚刚呈现的 DOM 替换接收到的

您的 div.scrollbars 将在 refs 调用 componentDidMount 时可用。它不仅会在它不是您的组件层次结构的一部分的情况下出现，即它没有被渲染。您可以看到显示滚动服务器呈现内容的工作示例 here.

在一般情况下，您从 render 函数调用 this.gridPosition() 的地方剪下的第一个代码实际上应该异常失败，因为到 gridPosition 正在访问 this.refs.scrollbars 它render 方法尚未创建。此代码工作的唯一机会是因为您的组件的第一次渲染发生时 this.props.slidePos 的值与 gridPosition.
中列出的任何值都不匹配
也请不要，使用String Refs是deprecated。

React/Redux - 在服务器端呈现页面后滚动 div

React/Redux - Scrolling a div after page has been server-side rendered

javascript

reactjs

isomorphic-javascript

redux