reactjs - 如何保存或缓存组件的 html？

Question

我知道您可以存储组件状态并更改它，以便“重新渲染”元素，但是在我的用例中，有一种情况是渲染没有跟上速度。

我正在寻找的是一旦一个组件被渲染，我想要它的 html 代码，包括它的 child 的 html。

也许是这样的:

render() {
  return(
          <ChildComponent/>
        );
}

componentDidMount() {
  // Get the html code of this Component here
  // Something like:
  // <div>
  //    <span>Child component</span>
  // </div>
}

我看过这个类似的问题: React caching rendered components

但它没有深入探讨如何将 html 元素作为字符串获取

Answer 1

你要么想办法renderToString on the client或直接访问 DOM，这将返回实际的(不漂亮的)DOM 节点。

这是一个使用 findDOMNode 的例子和 outerHTML :

class Example extends React.Component {
  componentDidMount() {
    console.log(
      ReactDOM.findDOMNode(this).outerHTML
    );
  }

  render() {
    return(
      <div id="demo">
        Ranch it up!
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='View'></div>

我想如果你想在某个地方实际使用这个字符串(渲染它)，这并不是那么有用，所以最好保存存储所有数据(state)并从那里开始。