如何使用reactjs有条件地隐藏报头

import React, { useState } from 'react';

function App() {
  const [showHeader, setShowHeader] = useState(true);

  return (
    <div>
      {showHeader && <Header />}
      <Content />
    </div>
  );
}

function Header() {
  return <h1>This is the header</h1>;
}

function Content() {
  return <p>This is the content</p>;
}

export default App;

import React, { useState } from 'react';

function App() {
  const [showHeader, setShowHeader] = useState(true);

  const toggleHeader = () => {
    setShowHeader(!showHeader);
  };

  return (
    <div>
      <button onClick={toggleHeader}>Toggle Header</button>
      {showHeader && <Header />}
      <Content />
    </div>
  );
}

function Header() {
  return <h1>This is the header</h1>;
}

function Content() {
  return <p>This is the content</p>;
}

export default App;