如何在 react.js 中使用 onClick 渲染特定组件？

Question

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

import styled from "styled-components";
import Panel from "./Panel";
const Menu = () => {
  return (
    <Main>
      <div>
        <h1 onClick={Panel}>(1+3)</h1>
      </div>

但我认为这是不对的，那么如何在 react.js 中使用 onClick 渲染特定组件？？

Answer 1

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

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