ReactJS 蓝图可折叠列表组件

介绍：该组件是一个可折叠的列表，用户可以通过点击标题收起或展开内容。适用于需要展示大量数据却不想让界面显得过于拥挤的场景。

使用方法

首先，确保你已经安装了ReactJS和相应的依赖库。如果没有，你需要运行以下命令来安装：

npm install react
npm install react-dom
npm install --save react-collapse
npm install --save react-icons

然后，在你的组件中引入以下代码：

import React, {useState} from 'react';
import {IoIosArrowDown, IoIosArrowUp} from 'react-icons/io';
import Collapse from 'react-collapse';

const CollapsibleList = ({title, children}) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="collapsible-list">
      <div className="title" onClick={toggle}>
        {isOpen ? (
          <IoIosArrowUp style={{marginRight: '5px'}} />
        ) : (
          <IoIosArrowDown style={{marginRight: '5px'}} />
        )}
        {title}
      </div>
      <Collapse isOpened={isOpen}>
        <div className="content">{children}</div>
      </Collapse>
    </div>
  );
};

export default CollapsibleList;

现在你可以在你的代码中使用 CollapsibleList 组件了。只需要传入标题和内容即可。例如：

<CollapsibleList title="Collapsible List Title">
  <p>This is the content of the list item.</p>
</CollapsibleList>

效果预览

在默认情况下，所有列表项都处于未展开状态。

当用户点击一个标题时，相应的内容会展开。

当用户再次点击标题时，相应的内容会收回。

注意事项

请确保你传入的内容的高度能够自动适应，否则可能会出现问题。你可以通过设置 max-height 来解决这个问题。

API

组件接受如下参数：

• title - 展示在标题栏上的文本（必需）。
• children - 列表的内容（必需）。

样式

你需要自行编写CSS样式来定义组件的外观和交互效果。以下是一些推荐的样式：

.collapsible-list {
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  margin: 10px 0;
}

.collapsible-list .title {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f8f8f8;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.collapsible-list .title:hover {
  background-color: #e9e9e9;
}

.collapsible-list .content {
  padding: 10px;
  background-color: #ffffff;
}

以上是介绍我的ReactJS蓝图可折叠列表组件，希望能够帮助到你！