材料表ReactJs从动作切换detailPanel打开/关闭

import React, { useState } from 'react';

const MaterialTable = () => {
  const [detailPanelOpen, setDetailPanelOpen] = useState(false);

  const handleDetailPanelToggle = () => {
    setDetailPanelOpen(!detailPanelOpen);
  };

  return (
    <div>
      {/* 材料表内容 */}
      <table>
        {/* 表头 */}
        <thead>
          <tr>
            <th>材料名称</th>
            <th>数量</th>
          </tr>
        </thead>
        {/* 表格内容 */}
        <tbody>
          <tr>
            <td>材料1</td>
            <td>10</td>
          </tr>
          <tr>
            <td>材料2</td>
            <td>5</td>
          </tr>
        </tbody>
      </table>

      {/* detailPanel */}
      {detailPanelOpen && (
        <div>
          {/* detailPanel内容 */}
          <p>这是detailPanel的内容。</p>
        </div>
      )}

      {/* 切换按钮 */}
      <button onClick={handleDetailPanelToggle}>
        {detailPanelOpen ? '关闭detailPanel' : '打开detailPanel'}
      </button>
    </div>
  );
};

export default MaterialTable;