在 ReactJS 中创建手风琴

ReactJS 是一个前端 JavaScript 库，它广泛用于开发动态、可交互的用户界面。在 ReactJS 中，您可以轻松地创建手风琴菜单，该菜单在点击时可以以展开和折叠的形式显示其子项。

本文介绍如何在 ReactJS 中创建手风琴，包括：

1. 创建 ReactJS 组件
2. 处理组件状态以支持展开和折叠
3. 渲染手风琴项和子项

1. 创建 ReactJS 组件

首先，我们需要创建一个 ReactJS 组件，该组件将呈现手风琴菜单。

import React from 'react';

class Accordion extends React.Component {
  render() {
    return (
      <div className="accordion">
        {/* 渲染手风琴项 */}
      </div>
    )
  }
}

export default Accordion;

在此代码中，我们导入 React 库并创建一个名为 Accordion 的 React 组件。render 函数返回一个 div 元素，该元素将呈现手风琴菜单。我们将在下一步中向此 div 元素添加手风琴项。

2. 处理组件状态以支持展开和折叠

接下来，我们需要处理手风琴项的展开和折叠状态。我们可以在 Accordion 组件的 state 属性中保存每个手风琴项的状态。

import React from 'react';

class Accordion extends React.Component {
  constructor(props) {
    super(props);
    
    // 手风琴项的状态，初始状态都是折叠的
    this.state = {
      items: [
        { title: 'Item 1', content: 'Content for Item 1', expanded: false },
        { title: 'Item 2', content: 'Content for Item 2', expanded: false },
        { title: 'Item 3', content: 'Content for Item 3', expanded: false }
      ]
    };
  }

  render() {
    return (
      <div className="accordion">
        {/* 渲染手风琴项 */}
      </div>
    )
  }
}

export default Accordion;

在此代码中，我们在 Accordion 组件的构造函数中初始化了手风琴项的状态。每个手风琴项都有一个标题，内容和一个 boolean 型属性 expanded，如果为 true，则该项已展开，否则为折叠状态。

现在，我们可以将手风琴项的状态渲染为 UI。接下来，我们将向 Accordion 组件中添加代码以实现这样的界面：

• 每个手风琴项的标题应该显示在一个按钮中。
• 当用户单击手风琴项的按钮时，该项应展开，并显示该项的内容。
• 如果用户单击手风琴项的标题，该项应折叠，并将内容隐藏。

3. 渲染手风琴项和子项

渲染每个手风琴项的最简单方法是使用 map 函数。我们可以使用 map 函数将 Accordion 组件的 state 中的项数组转换为一组按钮和内容：

import React from 'react';

class Accordion extends React.Component {
  constructor(props) {
    super(props);
    
    // 手风琴项的状态，初始状态都是折叠的
    this.state = {
      items: [
        { title: 'Item 1', content: 'Content for Item 1', expanded: false },
        { title: 'Item 2', content: 'Content for Item 2', expanded: false },
        { title: 'Item 3', content: 'Content for Item 3', expanded: false }
      ]
    };
  }

  render() {
    const { items } = this.state;
    return (
      <div className="accordion">
        {items.map((item, index) => {
          return (
            <div className="accordion-item" key={index}>
              <button 
                className="accordion-item__button"
                onClick={() => this.handleClick(index)}
              >
                {item.title}
              </button>
              {item.expanded && (
                <div className="accordion-item__content">
                  {item.content}
                </div>
              )}
            </div>
          );
        })}
      </div>
    )
  }
}

export default Accordion;

在此代码中，我们首先提取组件的状态数组 this.state.items。然后，我们使用 map 函数将此数组中的每个元素都转换为一个包含标题、按钮和内容的 div 元素。

我们还为每个按钮添加了一个单击事件。该事件将调用 handleClick 函数并将当前项的索引作为参数传递。我们稍后将创建该函数。

最后，我们根据每个项的 expanded 属性来呈现内容。如果 expanded 属性为 true，则使用展开的样式（display:block）呈现内容，否则使用折叠的样式（display:none）隐藏内容。

为了使手风琴项能够展开和折叠，我们需要创建一个 handleClick 函数。此函数将调用 setState，以在状态中更新单个手风琴项的 expanded 属性。

import React from 'react';

class Accordion extends React.Component {
  constructor(props) {
    super(props);
    
    // 手风琴项的状态，初始状态都是折叠的
    this.state = {
      items: [
        { title: 'Item 1', content: 'Content for Item 1', expanded: false },
        { title: 'Item 2', content: 'Content for Item 2', expanded: false },
        { title: 'Item 3', content: 'Content for Item 3', expanded: false }
      ]
    };
  }

  handleClick = (index) => {
    const { items } = this.state;
    const newItems = [...items];

    // 反转单个手风琴项的展开属性
    newItems[index] = { ...newItems[index], expanded: !newItems[index].expanded };

    // 更新组件的状态
    this.setState({ items: newItems });
  }

  render() {
    const { items } = this.state;
    return (
      <div className="accordion">
        {items.map((item, index) => {
          return (
            <div className="accordion-item" key={index}>
              <button 
                className="accordion-item__button"
                onClick={() => this.handleClick(index)}
              >
                {item.title}
              </button>
              {item.expanded && (
                <div className="accordion-item__content">
                  {item.content}
                </div>
              )}
            </div>
          );
        })}
      </div>
    )
  }
}

export default Accordion;

在此代码中，我们定义了一个 handleClick 函数，并将其附加到按钮的单击事件上。该函数接受手风琴项的索引作为参数，并使用 setState 更新该项的 expanded 属性。

展开和折叠状态现在可以通过单击手风琴项按钮来控制。这是最基本的手风琴菜单实现，您现在可以将其扩展为满足您特定需求的更复杂的实现。

这就是在 ReactJS 中创建手风琴的方法。通过将这些步骤放在一起，您可以轻松地创建适合您项目的复杂交互式用户界面。