如何强制 React 接受服务器标记

Question

在第一次加载时，我将我的标记完全填满服务器上的数据。

这很好用，在客户端 React 接管之前，客户端将其视为静态 html。但是这个客户端代码丢弃了标记。

我阻止 React 在第一次加载时请求每个 AJAX 的数据（因为它已经存在），只有当我使用 react-router <Link> 导航到它的客户端时。

但我不能强迫它简单地让标记存在，直到用户与之交互。

Answer 1

您可以使用 dangerouslySetInnerHTML 属性。例如，像这样创建一个新的组件包装器并设置 html 属性:

export default React.createClass({
  render: function() {

    return <div dangerouslySetInnerHTML={ this.createMarkup() }>

    </div>;
  },

  componentDidMount: function() {
    // attach some events
  },

  componentWillUnmount: function() {
    // detach some events
  },

  shouldComponentUpdate: function() {
    return false;
  },

  createMarkup: function() {
    return {
      __html: this.props.html
    };
  }
});

如何强制 React 接受服务器标记

How to force React to accept server markup

reactjs

isomorphic-javascript