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

【问题标题】：OnClick in react portal works only after second click反应门户中的 OnClick 仅在第二次单击后才有效
【发布时间】：2021-08-04 15:20:38
【问题描述】：

这是我的代码：

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

【问题讨论】：

我也有这个问题。如果您找到解决方案，请分享。

标签： javascript reactjs react-portal

【解决方案1】：

我无法重现您的问题，我觉得很好。

这是我尝试过的：

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
);

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

【讨论】：

【解决方案2】：

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

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

【讨论】：