隐藏React组件而不卸载

import React, { useState } from 'react';

function MyComponent() {
  const [isVisible, setIsVisible] = useState(true);

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      {isVisible && <p>This is a hidden component.</p>}
      <button onClick={toggleVisibility}>
        {isVisible ? 'Hide' : 'Show'}
      </button>
    </div>
  );
}

import React, { useState } from 'react';

function MyComponent() {
  const [isVisible, setIsVisible] = useState(true);

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <p className={isVisible ? 'visible' : 'hidden'}>
        This is a hidden component.
      </p>
      <button onClick={toggleVisibility}>
        {isVisible ? 'Hide' : 'Show'}
      </button>
    </div>
  );
}