javascript - 反应门户中的 OnClick 仅在第二次单击后才有效

Question

这是我的代码：

const portal: HTMLElement = document.createElement('div');
portal.style.cssText += 'position:relative;z-index:10000';
document.body.appendChild(portal);

const DocumentUploadItem = ({ condition }) => {
  const child = (
    <div onClick={() => console.log('click')}>
      Test
    </div>
  )

  return ReactDOM.createPortal(child, portal);
}

当我使用此 DocumentUploadItem 并单击它时，第一次没有任何反应，第二次单击后它会打印“测试”并进一步正常工作。我试图在文档上设置事件处理程序以测试它是否冒泡，但没有再次发生。我该如何解决？

Answer 1

解决方案不是将 jsx 分配给变量，而是分配一个组件，如下所示：

const child = () => <div></div>

Answer 2

我无法重现您的问题，对我来说看起来不错。

这是我尝试过的：

import { StrictMode } from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

const portal = document.createElement("div");
portal.style.cssText += "position:relative;z-index:10000";
document.body.appendChild(portal);

const DocumentUploadItem = ({ condition }) => {
  const child = <div onClick={() => console.log("click")}>Test</div>;

  return ReactDOM.createPortal(child, portal);
};

ReactDOM.render(
  <StrictMode>
    <DocumentUploadItem />
  </StrictMode>,
  rootElement
);

如果我犯了错误，请纠正我。
如果可能，请提供指向发生错误的沙箱的链接。