事件处理程序不显示组件答案

【问题标题】：Event handler not displaying component事件处理程序不显示组件
【发布时间】：2022-08-09 22:13:22
【问题描述】：

单击<button> 时，将调用单击处理程序，其中返回反应组件<ConfirmationDialog>。但是<ConfirmationDialog> 没有被调用和显示。为什么？

// App.js

import ConfirmationDialog from \"./ConfirmationDialog\";

export default function App() {
  const handleClick = () => {
    console.log(\"handle click\");
    return <ConfirmationDialog />; // called from click handler
  };
  return <button onClick={handleClick}>click</button>;
}

// ConfirmationDialog.js

import * as React from \"react\";

export default function ConfirmationDialog() { // child component
  console.log(\"confirmation dialog\");
  return <p>Confirmation dialog component</p>;
}

为什么单击处理程序 handleClick 不呈现 <ConfirmationDialog> ？

CodeSandbox 演示

标签： javascript reactjs

【解决方案1】：

查看更新的codesandbox

因为您正在从事件处理程序中调用的函数返回一个组件。您需要使用状态以您想要的方式主动隐藏或显示组件。

【讨论】：