Question

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

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

有没有办法这样做。

我想只在iframe中呈现，所以我不能使用ref。我想要未安装的组件的innerHTML

Answer 1

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

＆＃13;

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")
)

＆＃13;

<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>

＆＃13;

Answer 2

回复可能有点晚，但是您可以尝试通过ref来访问react children元素：

const r = React.useRef(null);
console.log(r.current.children)

Answer 3

<块引用>

您可以像这样访问innerHTML：

render() {
 const page = <PrintPage />
 const iframeContent = (e) =>{console.log(e.target.innerHTML)}

 return <iframe 
           srcDoc={iframeContent}
           onClick={(e)=>{handleClick(e)}}
        >;
}

如何获得React组件的innerHTML

3 个答案: