Question

注意：我使用漂亮的资料库react-rails，但就我理解我的问题而言，它不应影响答案。

我有<Component />加载<Map />，这意味着客户端呈现，因为它在服务器端没有意义（至少我使用的是lib）不这样做。）

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

React Server Side渲染：我怎么知道我的组件是在客户端安装的？

1 个答案: