如何显示和隐藏react .tsx文件？

.hidden {
  display: none;
}

import React from 'react';
import './YourComponent.css';

const YourComponent = () => {
  return (
    <div className="hidden">
      {/* 文件内容 */}
    </div>
  );
};

export default YourComponent;

import React, { useState } from 'react';

const YourComponent = () => {
  const [isHidden, setIsHidden] = useState(false);

  const toggleHidden = () => {
    setIsHidden(!isHidden);
  };

  return (
    <div>
      <button onClick={toggleHidden}>Toggle</button>
      {isHidden ? null : (
        <div>
          {/* 文件内容 */}
        </div>
      )}
    </div>
  );
};

export default YourComponent;