javascript - ReactJs Accordion 自动关闭机制

Question

我目前正在开发 React 版本 16.3.2 中的 Accordion 组件，该组件从另一个组件接收 props 并相应地显示 Accordion 。不幸的是我不能使用钩子(Hook)。

这工作得相当顺利，我现在想要实现的是一种方法，以便在同一页面上同时只能打开一个 Accordion 。因此，一旦您打开一个 Accordion (而另一个已经打开)，它应该会自动关闭已经打开的 Accordion 。

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

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

Answer 1

您可以使用应用程序组件中的状态 Hook 来执行类似的操作

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

那么你的 Accordion 组件就更简单了

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;

Accordion 调用应用程序组件上的函数，该函数更新状态并在 props 中传递显示逻辑