ReactJs Accordion 自動關閉機制

Question

我目前正在研究版本 16.3.2 中的手風琴組件，該組件從另一個組件接收道具並相應地顯示手風琴。 不幸的是我不能使用鈎子。

這很順利，我現在想要實現的是一種方法，以便在同一頁面上只能同時打開一個手風琴。 因此，一旦您打開一個手風琴（而另一個已經打開），它應該會自動關閉已經打開的手風琴。

我有一個 Id（描述當前部分的字符串，例如“聯系人”、“信息”等）並且手風琴的狀態保存在該狀態中（當您切換手風琴時設置為 true）。 我不太確定如何實現這種機制，正在尋找有關如何以智能方式解決此問題的提示。 任何指針？

示例： https : //codesandbox.io/s/reactjs-accordion-automatic-close-mechanism-6dys1 （我沒有添加所有樣式和動畫，因為這更多的是關於功能）

Answer 1

您可以在以下代碼和框中找到問題的解決方案https://codesandbox.io/s/reactjs-accordion-automatic-close-mechanism-yejc0

更改適合您的代碼庫的道具名稱，但邏輯是可靠的

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;

手風琴調用app組件上的一個函數，更新狀態，顯示邏輯在props中傳遞