如何获取 React 组件的innerHTML [英] How to get a React component's innerHTML

问题描述

我有一个 react 组件，我希望它的 innerHTML 作为 prop 传递给 iframe.

I have a react component and I want its innerHTML to pass as prop to an iframe.

render() {
        const page = <PrintPage />
        const iframeContent = page..something...innerHTML
        return (
            <iframe srcDoc={iframeContent}/>);
}

有没有办法这样做.

我只想在 iframe 内渲染，所以我不能使用 ref.我想要未安装的组件的innerHTML

I want to render only within the iframe, so i can't use ref. I want the innerHTML of component which is not mounted

推荐答案

您可以使用 refs 或 ReactDOM.findDOMNode 来获取innerHTML，但需要安装组件.

You can use refs or ReactDOM.findDOMNode to get innerHTML but the component should be mounted.

class App extends React.Component{

  componentDidMount(){
    console.log(this.ref.innerHTML)
    console.log(ReactDOM.findDOMNode(this).innerHTML)
  }
  render(){
    return (
      <div ref={r=>this.ref = r}>app</div>
    )
  }
}

ReactDOM.render(
  <App />,document.getElementById("app")
)

<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="app"></div>

这篇关于如何获取 React 组件的innerHTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！