ReactJs 手风琴自动关闭机制

Question

我目前正在开发 react 版本 16.3.2 中的手风琴组件，该组件从另一个组件接收道具并相应地显示手风琴。不幸的是我不能使用钩子。

这很顺利，我现在想要实现的是一种方法，可以在同一页面上同时打开一个手风琴。因此，一旦您打开一个手风琴（而另一个手风琴已经打开），它应该会自动关闭已经打开的手风琴。

我有一个 Id（描述当前部分的字符串，例如“联系人”、“信息”等），并且手风琴的状态保存在状态中（当您切换手风琴时设置为 true）。 我不太确定如何实现此机制，并且正在寻找有关如何以智能方式解决此问题的提示。有什么指点吗？

示例： https://codesandbox.io/s/reactjs-accordion-automatic-close-mechanism-6dys1 （我没有添加所有的样式和动画，因为这更多的是关于功能）

Answer 1

你可以做这样的事情，使用 App 组件中的状态钩子

export default function App() {
  const items = [
    { id: 1, title: 'First Accordion', content: 'Hello' },
    { id: 2, title: 'Click me', content: 'Hello 2' },
    { id: 3, title: 'Third Accordion Accordion', content: 'Hello 3' },
  ]

  const [selectedItem, setSelectedItem] = useState(1)

  const handleClick = id => {
    setSelectedItem(id)
  }
  return (
    <div className="App">
      {items.map(x => {
        return (
          <Accordion 
            key={x.id} 
            id={x.id}
            title={x.title} 
            open={x.id === selectedItem}
           onClick={handleClick}
          >
            <p>{x.title}</p>
          </Accordion>
        )
      })}
    </div>
  );
}

那么你的手风琴组件就简单一点

class Accordion extends React.Component {
  accToggle() {
    this.props.onClick(this.props.id);
  }

  sectionClasses() {
    let classes = "accordion";
    classes += this.props.open ? " sec-on" : "";
    classes += "sec-underway";

    return classes.trim();
  }

  render() {
    return (
      <section className={this.sectionClasses()} id={this.props.id}>
        <div className="acc-title" onClick={this.accToggle.bind(this)}>
          <h3 className="acc-text">{this.props.title}</h3>
          <div className="acc-nav">
            <span className="acc-toggle" />
          </div>
        </div>

        <div className="acc-content">{this.props.children}</div>
      </section>
    );
  }
}

Accordion.defaultProps = {
  open: false
};

Accordion.propTypes = {
  id: PropTypes.number.isRequired,
  children: PropTypes.any,
  onFocus: PropTypes.func,
  progress: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
    PropTypes.bool
  ]),
  title: PropTypes.string,
  open: PropTypes.bool
};

export default Accordion;

手风琴在app组件上调用一个函数，该函数会更新状态并在props中向下传递显示逻辑

Answer 2

您可以在以下代码框中找到您的问题的解决方案 https://codesandbox.io/s/reactjs-accordion-automatic-close-mechanism-yejc0

根据您的代码库更改道具名称，但逻辑是可靠的