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

我有一个在React和Redux中使用服务器端呈现的应用程序。React/Redux - 在服务器端呈现页面后滚动div

在应用程序中有一个包含在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标记在服务器渲染后似乎没有连接到应用程序。

如果任何人都可以指出这一点或指出我正确的方向来解决它，我将非常感激。

来源

2017-04-17 Tom Patel

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

你div.scrollbars将在refs可通过componentDidMount调用的时间。这不仅仅是因为它不是组件层次结构的一部分，即它不会被渲染。您可以看到显示滚动服务器呈现内容的工作示例here。

在一般情况下，你的第一个代码剪断你来自哪里，render函数调用this.gridPosition()实际上应该与异常下降，因为时间gridPosition正在访问this.refs.scrollbars它没有被render方法创建呢。此代码工作的唯一机会是因为您的组件的首次呈现发生的值与this.props.slidePos的值不匹配gridPosition中列出的任何值。

也请不要，那使用String Refs是deprecated。

来源

2017-04-17 19:28:47 fkulikov

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

回答

相关问题