带有可扩展列的表格

Question

我想在 react Js 中创建一个表。该表将有两行可扩展行，例如 A 和 B。单击 A 行时，来自休息服务的 json 结果将以表格的形式显示。并单击 B 行，将显示来自另一个休息服务的 json。基本上它会是一个包含两个可扩展列的表格，单击每个列会显示不同的 Json。我目前正在使用 ReactTable 库来创建表。虽然创建了表，但无法在其中扩展行。请帮忙。

需求表述如下：

下面是A行和B行展开时的状态；

A 行

字段1 字段2 字段3 字段4 字段5

字段1 字段2 字段3 字段4 字段5

B 行

字段1 字段2 字段3 字段4 字段5

字段1 字段2 字段3 字段4 字段5

Answer 1

您实际需要做的是保留两个按钮，按钮 A 和 B。每个按钮下方都有一个表格，其中列预设为将以 JSON 形式返回的字段。当您按下按钮 A 时，它将获取数据。如果数据数量 > 0，该按钮将显示表格，您可以在其中对结果运行 .map() 并使用数据呈现每一行。如何呈现行数据的示例：

// In your render method: 
  let id = 0;
  const ItemsList = results.map((item) => {
      ++id; 
      return (
          <tr key={{id}}>
              <td>item.id</td>
              <td>item.name</td>
          </tr>
      );
   });

   return (results.length > 0) : (
    <table>
       <thead> 
           <tr><th>ID</th><th>NAME</th></tr>
       </thead>
       <tbody>
           <ItemsList />
        </tbody>
    </table>
   ) : null;
 });
); `