ReactJS 中 iFrame 的 document.getElementById

Question

In my site, I need to send information (via postMessage) to an iFrame. I know in regular Javascript, I would accomplish this by using document.getElementById or $("#iframe") in JQuery to select the iframe. However, I am unsure of how to do this in ReactJS. Is there a specific way of doing this in ReactJS/NextJS that I just don't know about? I need access to the iframe (the child component) from its container (parent component).

Answer 1

If the iframe is rendered by React, and only the component that renders it (or its descendants) needs to access it, then typically you use refs .

If the iframe is always on the page, or rendered in some way outside of React, it's perfectly fine to get it via document.getElementById , document.querySelector , or other DOM methods.

---

Here's an example of using a ref in a functional component via useRef , but you can do the same thing (in a different way) in a class component via createRef . I'll use a div instead of an iframe , but it's the same for iframe s.

 function Example() { const ref = React.useRef(null); const doSomething = () => { if (ref.current) { console.log(`The div's text is "${ref.current.textContent}"`); } else { console.log("The div doesn't exist"); } }; return ( <div> <div ref={ref}> This is the target div </div> <input type="button" onClick={doSomething} value="Click Me" /> </div> ); } ReactDOM.render(<Example/>, document.getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Class component example:

 class Example extends React.Component { constructor(props) { super(props); this.ref = React.createRef(); this.doSomething = this.doSomething.bind(this); } doSomething() { if (this.ref.current) { console.log(`The div's text is "${this.ref.current.textContent}"`); } else { console.log("The div doesn't exist"); } } render() { return ( <div> <div ref={this.ref}> This is the target div </div> <input type="button" onClick={this.doSomething} value="Click Me" /> </div> ); } } ReactDOM.render(<Example/>, document.getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>