reactjs - React 服务器端渲染：我怎么知道我的组件安装在客户端？

Question

注意：我正在使用漂亮的库react-rails尽管据我了解我的问题它不应该影响答案。

---

我有一个<Component />加载 a <Map />，这意味着客户端渲染，因为它在服务器端没有意义（至少我使用的库不这样做）。

因此，我想在客户端准备好之前显示图像，以应用 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>)
  }
});