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时，事件会在客户端呈现您的应用程序（ReactDOM.render(....)仍在此处并被调用），并将比较生成的校验和。如果它们不匹配，React将用刚刚渲染的DOM替换收到的DOM。

在div.scrollbars调用之前，refs 将在componentDidMount中提供 。它不仅仅是因为它不是组件层次结构的一部分，即它没有被渲染。您可以看到显示滚动服务器呈现内容here的工作示例。

一般情况下，您从this.gridPosition()函数调用render的第一个代码剪切实际应该是异常，因为在gridPosition访问this.refs.scrollbars时它没有已由render方法创建。此代码运行的唯一机会是因为首次呈现组件时this.props.slidePos的值与gridPosition中列出的任何值都不匹配。

另请注意，使用String Refs deprecated。

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

1 个答案: