react中使用Iframe嵌入HTML页面

安装 react-iframe插件

import React from "react";
import ReactDOM from "react-dom";
import Iframe from "react-iframe";
export default class FrameLoader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      iFrameHeight: this.props.height ? this.props.height : 0,	// 设置iframe的高度
    };
  }

  componentDidMount() {}

  render() {
    return (
      <Iframe
        onLoad={() => {
          const obj = ReactDOM.findDOMNode(this);
          this.setState({
            iFrameHeight: obj.contentWindow.document.body.scrollHeight + "px",
          });
        }}
        frameBorder="0"
        height="100%"
        width="100%"
        position="absolute"
        scrolling="no"
       // 接收到的 Iframe 的URL地址
        url={this.props.url}
      />
    );
  }
}

父组件掉用子组件

import React from "react";
import FrameLoader from "@/components/FrameLoader";
export default class FactoryInfo extends React.Component {
  constructor(props) {
    super(props);
    console.log(props, "props数据");
    this.state = {
      transferData: {
        optimizationOrderFn: false,
        allocationFn: false,
        releaseFn: false,
        revocationFn: false,
      },
    };
  }
  componentDidMount() {
  // 接收Iframe 传递的数据
    window.addEventListener("message", (e) => {
      const { allocationFn, releaseFn } = e.data || {}; //传递的数据
      if (allocationFn || releaseFn) {
        this.setState({
          transferData: e.data,	
        });

        console.log(this.state.transferData, "传数据");
      }
    });
  }
 
  render() {
    const { transferData } = this.state || {};
    console.log(transferData, "数据");
    return (
      <div style={{ height: "100%" }}>
		// 设置Iframe 盒子的宽度
        <div style={{ minHeight: "calc(55vh - 97px)", position: "relative" }}>
        // 这个是打包后的Iframe 地址：要到webpack中配置打包地址
          <FrameLoader url="/dist/iframe/QuotaOccupyGannt/index.html" />
        </div>
      </div>
    );
  }
}

iframe向父组件传递数据(我用的是jq写的iframe页面)

绑定点击事件

// 传递参数给父组件
$("#allocationFn").click(function () {
  console.log("点击了，配额分配");
  var transferData = {
    allocationFn: true,
  };
  // 给父组件传参
  window.parent.postMessage(transferData);
});