Question

我想在react Js中创建一个表。该表将具有两行可扩展的行，即A和B。单击A行时，rest服务的json结果将以表的形式显示。并点击B行，将显示来自其他Rest服务的json。基本上，它将是一个带有两个可扩展列的表，单击它们将显示不同的Json。我目前正在使用ReactTable库创建表。虽然表已创建，但无法在其中进行行扩展。请提供帮助。

需求表示如下：

下面是A行和B行将被展开的状态； </ p>

A行

field1 field2 field3 field4 field5

B排

field1 field2 field3 field4 field5

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;
 });
); `

带有可扩展列的表格

1 个答案: