创建可折叠的 React 组件

简介

在本实验中，我们将探索如何使用 useState 钩子在 React 中创建一个可折叠内容组件。该组件将允许用户通过点击按钮来切换内容的可见性，使其成为在网页上组织和呈现信息的有用工具。在本实验结束时，你将更好地理解如何在 React 中创建可复用组件，从而改善你的 Web 应用程序的可访问性和用户体验。

Skills Graph

可折叠内容

VM 中已经提供了 index.html 和 script.js。一般来说，你只需要在 script.js 和 style.css 中添加代码。

此函数会渲染一个可折叠组件，该组件带有一个用于切换其内容可见性的按钮。以下是使用方法：

1. 使用 useState() 钩子创建 isCollapsed 状态变量，它表示内容当前是折叠还是展开。将其初始化为 collapsed。
2. 使用 <button> 元素切换 isCollapsed 状态，并显示/隐藏通过 children 属性传递下来的内容。
3. 使用 isCollapsed 为内容容器应用适当的 CSS 类，即 collapsed 或 expanded，这决定了它的外观。
4. 根据 isCollapsed 状态更新内容容器的 aria-expanded 属性，以使该组件对残疾用户也可访问。

以下是此组件所需的 CSS 代码：

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

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

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

以下是 JavaScript 代码：

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>
);

请点击右下角的“上线”以在端口 8080 上运行 Web 服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了可折叠内容实验。你可以在 LabEx 中练习更多实验来提升你的技能。