我有一个 react 组件，我希望它的 innerHTML 作为 prop 传递给 iframe。
render() {
const page = <PrintPage />
const iframeContent = page..something...innerHTML
return (
<iframe srcDoc={iframeContent}/>);
}
有什么办法可以这样做。
我只想在 iframe 内渲染，所以我不能使用 ref。我想要未安装的组件的innerHTML
您可以使用refs或ReactDOM.findDOMNode来获取innerHTML，但应该安装该组件。
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>回复可能有点晚了，但您可以尝试通过 ref 访问 react children 元素：
const r = React.useRef(null);
console.log(r.current.children)
您可以像这样访问innerHTML：
render() {
const page = <PrintPage />
const iframeContent = (e) =>{console.log(e.target.innerHTML)}
return <iframe
srcDoc={iframeContent}
onClick={(e)=>{handleClick(e)}}
>;
}