可折叠内容

渲染一个带有可折叠内容的组件。

• 使用 useState() 钩子创建 isCollapsed 状态变量，并给它一个初始值 collapsed。
• 使用 <button> 来改变组件的 isCollapsed 状态以及通过 children 传递的组件内容。
• 使用 isCollapsed 来确定内容的外观，并应用适当的 className。
• 根据 isCollapsed 更新 aria-expanded 属性的值，使组件具有可访问性。

.collapse-button {
  display: block;
  width: 100%;
}

.collapse-content.collapsed {
  display: none;
}

.collapsed-content.expanded {
  display: block;
}

const Collapse = ({ collapsed, children }) => {
  const [isCollapsed, setIsCollapsed] = React.useState(collapsed);

  return (
    <>
      <button
        className="collapse-button"
        onClick={() => setIsCollapsed(!isCollapsed)}
      >
        {isCollapsed ? '显示' : '隐藏'}内容
      </button>
      <div
        className={`collapse-content ${isCollapsed ? 'collapsed' : 'expanded'}`}
        aria-expanded={isCollapsed}
      >
        {children}
      </div>
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <Collapse>
    <h1>这是一个折叠</h1>
    <p>你好，世界！</p>
  </Collapse>
);