如何在React中创建动态嵌套折叠

import React, { useState } from 'react';

const Collapse = ({ title, children }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleCollapse = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <button onClick={toggleCollapse}>{isOpen ? '-' : '+'}</button>
      <h3>{title}</h3>
      {isOpen && children}
    </div>
  );
};

export default Collapse;

import React from 'react';
import Collapse from './Collapse';

const App = () => {
  return (
    <div>
      <Collapse title="面板1">
        <p>这是面板1的内容。</p>
      </Collapse>
      <Collapse title="面板2">
        <p>这是面板2的内容。</p>
      </Collapse>
    </div>
  );
};

export default App;