Reactjs 如何在react.js中使用onClick呈现特定组件？

我是react.js的新手。我想渲染出一个组件。像这样

从“样式化组件”导入样式化；
从“/Panel”导入面板；
常量菜单=（）=>{
返回(
(1+3)

代码应该是不言自明的。如果您不理解其中的任何部分，请更新我

import styled from "styled-components";
import Panel from "./Panel";
import { useState } from "react";

const Menu = () => {
  const [showPanel, setShowPanel] = useState(false);
  const handleOnClick = () => setShowPanel(true);

  return (
    <Main>
      <div>
        <h1 onClick={handleOnClick}>(1+3)</h1>
      </div>
      {showPanel ? <Panel /> : null}
    </Main>
  );
};

从“样式化组件”导入样式化；
从“/Panel”导入面板；
从“react”导入{useState}；
常量菜单=（）=>{
const[showPanel，setShowPanel]=使用状态（false）；
const handleOnClick=（）=>setShowPanel（true）；
返回(
(1+3)
{showPanel？：null}
);
};

您能告诉我们您的面板组件是什么样子吗？它是一个样式化的组件吗？哦，它就是这样使用的！谢谢！这非常有用！