如何在react中呈现状态中的组件？

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default MyComponent;

import React, { useState } from 'react';
import MyComponent from './MyComponent';

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

  return (
    <div>
      {showComponent && <MyComponent />}
      <button onClick={() => setShowComponent(!showComponent)}>
        Toggle Component
      </button>
    </div>
  );
}

export default ParentComponent;

import React from 'react';
import ReactDOM from 'react-dom';
import ParentComponent from './ParentComponent';

ReactDOM.render(
  <React.StrictMode>
    <ParentComponent />
  </React.StrictMode>,
  document.getElementById('root')
);