如何在react js中隐藏一些基于某些标志的组件

import React, { useState } from 'react';

function App() {
  const [showComponent, setShowComponent] = useState(true);

  return (
    <div>
      {showComponent && <Component />}
      <button onClick={() => setShowComponent(!showComponent)}>
        切换组件显示
      </button>
    </div>
  );
}

function Component() {
  return <div>这是一个被隐藏的组件</div>;
}

export default App;

import React, { useState } from 'react';

function App() {
  const [showComponent, setShowComponent] = useState(true);

  return (
    <div>
      {showComponent ? <Component /> : null}
      <button onClick={() => setShowComponent(!showComponent)}>
        切换组件显示
      </button>
    </div>
  );
}

function Component() {
  return <div>这是一个被隐藏的组件</div>;
}

export default App;