javascript - 在 React 门户中呈现 iFrame

Question

我正在创建一个 Logger 服务来跟踪我的应用程序中的事件。为了使 Logger 服务通用，我使用 React 的 Portal 来捕获在我的应用程序中触发的事件。我的应用程序的基本思想是:

<LoggerPortal>
   <App>
</LoggerPortal>

在我的应用程序中使用 iFrame 之前，这对我的用例来说效果很好。

考虑一个呈现 iFrame 的非常简单的组件:

const Frame = props => {
  const refiFrame = useRef(null);

  useEffect(() => {
    console.log(refiFrame.current.contentDocument);
  }, []);

  return (
    <>
      <iframe id="i-framed-you" title="original-iframe-title" ref={refiFrame} />
    </>
  );
};

现在，当我在上面渲染这个 Frame 组件时没有 Portal 围绕它，iframe.contentDocument 会按预期记录。

ReactDOM.render(<Frame />,rootElement)

但是当我渲染包含在 Portal 中的 Frame 组件时，iFrame.contentDocument 的值为 null。

ReactDOM.render(
  <LoggerPortal>
    <Frame />
  </LoggerPortal>,
  rootElement
);

这是一个codesandbox有一个描述我的问题的应用程序。在使用门户网站和 iFrame 时，有人看到过这个问题吗？我在这里遗漏了什么明显的东西吗？

Answer 1

棘手的问题!

useRef当您进行更改以让 React 添加或删除 DOM 节点时，不会导致重新渲染。在您的情况下，附上 iframe给你的<Portal>的 props.children ，因此您的控制台返回 null .您必须改用回调引用:useCallback

因此，要获取 iframe 的引用，您可以尝试:

  let refiFrame =  useCallback(node => {
    refiFrame = node
  });

这是您的 codesandbox 的工作修改版本:https://codesandbox.io/s/portal-iframe-dmmnx