React中如何通过点击事件打开指定折叠面板并自动关闭其他面板

嘿，我来帮你搞定这两个折叠面板的需求！咱们一步步来改你的代码：

核心思路调整 #

原来你的Accordion组件用单个open布尔值控制状态，这没法区分多个Section。咱们把状态改成跟踪当前激活的Section标识（比如索引、自定义id），这样既能精准打开指定Section，又能自动关闭其他面板。

1. 修改Accordion组件 #

先更新组件的state和点击事件逻辑：

import React, { Component } from 'react';
import Section from './section';

class Accordion extends Component {
  constructor(props) {
    super(props);
    // 用activeSection存储当前激活的Section标识（初始为null表示全部关闭）
    this.state = { 
      activeSection: null,
      headingClassName: 'accordion-heading',
      className: 'accordion-content'
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(sectionId) {
    // 点击已激活的Section就关闭，否则切换到该Section
    this.setState(prevState => ({
      activeSection: prevState.activeSection === sectionId ? null : sectionId
    }));
  }

  render() {
    // 假设你的props里传入了sections数组，每个项包含id、标题、内容
    const { sections } = this.props;

    return (
      <div className="accordion">
        {sections.map(section => (
          <Section
            key={section.id}
            id={section.id}
            title={section.title}
            content={section.content}
            // 给Section传是否激活的状态
            isOpen={this.state.activeSection === section.id}
            // 绑定点击事件，传递当前Section的id
            onClick={() => this.handleClick(section.id)}
            headingClassName={this.state.headingClassName}
            contentClassName={this.state.className}
          />
        ))}
      </div>
    );
  }
}

2. 调整Section组件 #

让Section根据isOpen props控制内容的显示/隐藏：

import React from 'react';

const Section = ({ id, title, content, isOpen, onClick, headingClassName, contentClassName }) => {
  return (
    <div className="accordion-section">
      <div 
        className={`${headingClassName} ${isOpen ? 'active' : ''}`}
        onClick={onClick}
        style={{ cursor: 'pointer' }}
      >
        {title}
        {/* 可选：添加箭头图标提示展开状态 */}
        <span style={{ marginLeft: '8px' }}>{isOpen ? '▼' : '▶'}</span>
      </div>
      {/* 根据isOpen控制内容显示 */}
      <div 
        className={`${contentClassName} ${isOpen ? 'show' : 'hide'}`}
        // 也可以直接用style控制：style={{ display: isOpen ? 'block' : 'none' }}
      >
        {content}
      </div>
    </div>
  );
};

export default Section;

关键逻辑说明 #

• 点击打开指定Section：每个Section点击时会把自身的id传给handleClick，state里的activeSection会更新为这个id，对应的Section就会因为isOpen为true而展开。
• 自动关闭其他面板：因为activeSection只能存储一个标识，当你点击另一个Section时，activeSection会被替换成新的id，之前激活的Section的isOpen会自动变成false，从而关闭。

可选扩展 #

如果你想临时允许多面板同时展开，只需要把activeSection改成数组，点击时添加/移除对应的id即可，但你的需求是自动关闭其他，所以上面的单标识方案完全匹配。

内容的提问来源于stack exchange，提问作者kian villa