如何获取React组件的innerHTML [英] How to get a React component's innerHTML
本文介绍了如何获取React组件的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}/>);
}
有没有办法做这样的事?
Is there any way for doing like this.
我只想在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屋!
查看全文