如何将已安装的 React 组件“移植”到另一个组件中？

Question

目标：

iFrame 在组件 A 中加载网页内容

将 iFrame 传送到组件 B

iFrame 不应作为新实例挂载，并且其所有状态（包括反应状态）应保留从 comp A 到 comp B，反之亦然。

目前，使用 React Portal 和其他门户库，它只接受一个组件，然后将其安装到所需的组件中。

我希望记忆/状态在传送过程中持续存在

在这种情况下，“传送”意味着我将节点从一个组件发送到另一个组件，而不是安装该组件的新实例。 （请不要尝试使用 css 解决方法！）

要知道它是否正常工作，请在组件 A 的 iFrame 中导航，当它“传送”到组件 B 时，它应该具有相同的状态。

至于当它实际上不再使用时卸载它，我们可以有一个助手 getComponentProxy("component-id").destroy()。

Answer 1

我不确定我是否理解您的要求。请不要投反对票，我正在努力提供帮助。

因此要访问父节点，可以使用：

window.parent.document.getElementById('portal')

。然后你可以将你的组件挂载到节点上：

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

const Welcome = () => {
  const [userName, setUserName] = useState('Guest')

  useEffect(() => {
    setTimeout(() => setUserName('Bob'), 3000)
  }, [])

  return (
    <p>Hello {userName}!</p>
  )
}


createPortal(
  <Welcome/>, 
  window.parent.document.getElementById('portal'),
)

对于 iframe 和父文档之间的通信（共享状态），您可以使用：

// send object (json) from iframe
window.parent.postMessage({hello: 'world!'}, "*")


// add listener on parent document to get data from iframe:
window.addEventListener('message', event => {
  console.log(event.data)
}, false)