我试图在React组件中设置iframe的内容,但我无法做到.我有一个组件,其中包含一个函数,当iframe完成加载时必须调用该函数.在该函数中,我正在设置内容,但似乎根本没有调用onload函数.我在chrome浏览器中测试它.我正在尝试以下方法:

var MyIframe = React.createClass({
    componentDidMount : function(){
        var iframe = this.refs.iframe.getDOMNode();
        if(iframe.attachEvent){
            iframe.attacheEvent("onload", this.props.onLoad);
        }else{
            iframe.onload = this.props.onLoad;
        }
    },
    render: function(){
        return 
    )
  }
}

使用React Hooks时,它变得更加简洁:

import React, { useState } from 'react'
import { createPortal } from 'react-dom'

export const IFrame = ({ children, ...props }) => {
  const [contentRef, setContentRef] = useState(null)
  const mountNode = contentRef && contentRef.contentWindow.document.body

  return (
    
  )
}

用法:

import Frame from './Frame'

const MyComp = () => 
Hello Content!

进一步的控制,例如在不同iframe ,可以容易地实现作为本主旨所示.

还有react-frame-component,一个包,恕我直言提供了在React中使用iframe时所需的一切.

SSR

有一件事(至少据我所知),你几乎无法用Portal实现,是服务器端渲染,因为当它们具有对实际DOM节点的引用时,它们只能被渲染.所以,如果你......

...迫切需要预渲染的iframe内容

...不介意切割虚拟dom树

...目标浏览器,支持srcdociframe上的属性

...然后你可以从这样的事情开始:

import React, { Component } from 'react'
import { renderToString } from 'react-dom/server'
import { hydrate, render } from 'react-dom'   

const wrapWithMountNode = html => {
  return `
${html}
`.trim()
}

export default class SSRFrame extends Component {
  constructor(props) {
    super(props)
    this.initialMarkup = wrapWithMountNode(
      renderToString(
        React.Children.only(this.props.children)
      )
    )

    this.contentRef = null
    this.setContentRef = node => {
      this.contentRef =
        ((!node || !node.contentWindow) && null) ||
        node.contentWindow.document.getElementById('frame')
    }
  }

  componentDidMount() {
    this.contentRef &&
      hydrate(
        React.Children.only(this.props.children),
        this.contentRef
      )
  }

  componentDidUpdate() {
    this.contentRef &&
      render(
        React.Children.only(this.props.children),
        this.contentRef
      )
  }

  componentWillUnmount() {
    this.contentRef = null
  }

  render() {
    const { children, ...props } = this.props // eslint-disable-line
    return (