React服務器端渲染：我怎麼知道我的組件安裝在客戶端？

Question

注意：我使用美麗的圖書館react-rails，儘管它不應該影響答案，據我瞭解我的問題。

---

我有加載<Map />，這意味着客戶端呈現，因爲它不會使在服務器端（至少的lib我使用沒有做到這一點）意義上的<Component />。

因此，我想在客戶端準備好之前顯示圖像，以應用Skeuomorphism原則。

基本上，這意味着我有：

var Component = React.createClass({ 
    render: function() { 
    var content; 
    if (this.state.clientSideReady) { // How can I change my component state here? 
     content = <Map /> 
    } else { 
     content = <PlaceholderImage /> 
    } 
    return (<div>{content}</div>) 
    } 
}); 

從我目前的理解，componentDidMount被稱爲在服務器端，在生成模板字符串。我如何知道安裝在客戶端上的組件實際上是，以便我可以用實際地圖替換我的圖像？

Answer 1

我的錯誤。由此回答componentDidMount在服務器端不叫。

所以我可以去：

var Component = React.createClass({ 
    getInitialState: function() { 
    return { 
     clientSideReady: false 
    } 
    }, 
    componentDidMount: function() { 
    this.setState({ 
     clientSideReady: true 
    }); 
    }, 
    render: function() { 
    var content; 
    if (this.state.clientSideReady) { 
     content = <Map /> 
    } else { 
     content = <PlaceholderImage /> 
    } 
    return (<div>{content}</div>) 
    } 
});