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

回答

相關問題