ReactJs 手风琴自动关闭机制

Question

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

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

我有一个 Id（描述当前部分的字符串，例如 'contact'、'info' 等）并且手风琴的状态保存在状态中（当您设置为真时切换手风琴）。我不太确定如何实施此机制，并且正在寻找有关如何以巧妙的方式解决此问题的提示。有什么指点吗？

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

Answer 1

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

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

Answer 2

你可以这样做，使用 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;

手风琴调用应用程序组件上的一个函数，该函数更新状态并在道具中传递显示逻辑

ReactJs 手风琴自动关闭机制

ReactJs Accordion Automatic Close Mechanism

javascript

accordion

reactjs