如何在 iframe 中加載 html 表單

Question

我想知道如何在reactjs中加載iframe中的HTML表格。

我有一個包含所有輸入字段的表單組件，我想在 iframe 中加載該表單組件。我想知道我該怎么做。

const Form = () => {
  return (
    <>
      <iframe name="iframe-form" title="This is an iframe form." />
    <form target="iframe-form" onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name</label>
        <input
          type="text"
          id="name"
        />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input type="email" id="email" />
      </div>
      <button>Submit</button>
    </form>
</>
  );
};

export default Form;

目前，它是這樣呈現的。

Answer 1

根據 React 文檔，“ React Portals ”允許我們將子項渲染到存在於父組件的 DOM 層次結構之外的 DOM 節點中。 基本上，門戶網站讓我們可以在任何我們想要的地方渲染孩子。

所以大的解釋是創建一個門戶：

ReactDOM.createPortal(child, container)

在這種情況下，子項是 React element 、 fragment或string ，容器是門戶應呈現到的DOM位置或節點。

使用 React 門戶，我們可以選擇在 DOM 層次結構中放置 DOM 節點的位置，門戶的內容也被視為父虛擬 DOM的子節點。

我的組件.js

import React from 'react'

function MyComponent() {
    return (
        <div>
            <p style={{color: 'red'}}>Testing to see if my component renders!</p>
        </div>
    )
}

export default MyComponent;

現在，讓我們創建一個名為CustomIframe.js的文件並編寫以下代碼：

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

const CustomIframe = ({
  children,
  ...props
}) => {
  const [contentRef, setContentRef] = useState(null)

  const mountNode =
    contentRef?.contentWindow?.document?.body

  return (
    <iframe {...props} ref={setContentRef}>
      {mountNode && createPortal(children, mountNode)}
    </iframe>
  )
}

export default CustomIframe;

我們使用useState() Hook 創建了一個 ref，因此，一旦 state 更新，組件將重新渲染。

我們還可以訪問 iframe 文檔主體，然后創建一個門戶來渲染傳遞給此主體中的 iframe的子項：

import './App.css';
import CustomIframe from './CustomIframe';
import MyComponent from './MyComponent';
function App() {


  return (
    <CustomIframe title='A custom made iframe'>
        <MyComponent />
      </CustomIframe>
  );
}

export default App;

您可以將任何 React 應用程序或組件作為CustomIframe的子項傳遞，它應該可以正常工作。

React 應用程序或組件將被封裝，這意味着您可以獨立開發和維護它。

您也可以使用名為 React frame component 的庫實現與上述相同的封裝。 要安裝它，請運行以下命令：

npm install --save react-frame-component

按如下方式封裝您的組件：

import Frame from 'react-frame-component';

function App() {

  return (
    <div className='App'>
        <p>Iframes in React</p>
        <Frame >
           <MyComponent />
        </Frame>
    </div>
  );
}

export default App;

Answer 2

將ReactDOMServer.renderToString與iframe的srcDoc屬性一起使用。

import ReactDOMServer from "react-dom/server";

export default function App() {
  return (
    <div className="App">
      <iframe
        name="iframe-form"
        title="This is an iframe form."
        srcDoc={ReactDOMServer.renderToString(<Form />)}
      />
    </div>
  );
}

const Form = () => {
  return (
    <form target="iframe-form">
      <div>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input type="email" id="email" />
      </div>
      <button>Submit</button>
    </form>
  );
};