时间戳

首页 > 解决方案 > 如何在垂直选项卡中呈现数据

javascript - 如何在垂直选项卡中呈现数据

问题描述

我需要使用 React 垂直选项卡呈现数据，我已经给出了我尝试过的代码以及来自 API 的数据。我不知道如何在里面循环<TabPanel>。代码沙盒链接https://codesandbox.io/s/jovial-darkness-qob1n?file=/src/tab.js

      <Tabs
                defaultTab="vertical-tab-one"
                vertical
                className="vertical-tabs"
              >
                <TabList>
                  {subProducts.map((subProduct, index) => (
                    <Tab>{subProduct.subProductName}</Tab>
                  ))}
                </TabList>
                {subProducts.map((subProduct, index) => (
                  <TabPanel className="tab-pane fade mt-4 show  ">
                    {subProduct.bookingDetails.map((attr, i) => (
                      <>
                        <table id="customers">
                          <tbody>
                            <tr>
                              <td>{attr.name}</td>
                              <td>{attr.value}</td>
                            </tr>
                          </tbody>
                        </table>
                      </>
                    ))}
                  </TabPanel>
                ))}
              </Tabs>

API 输出：

subProducts: [
        {
          bookingDetails: [
            {
              name: "Birthday Decoration",
              value: "YES"
            },
            {
              name: "Photographer",
              value: "NO"
            }
          ],
          subProductName: "Celebration"
        },
        {
          bookingDetails: [
            {
              name: "Decoration",
              value: "YES"
            },
            {
              name: "Video",
              value: "NO"
            }
          ],
          subProductName: "FamilY"
        }
      ]

标签： javascripthtmlcssreactjstabs

解决方案

在沙箱中，您尝试为数组bookingDetails中的每个对象进行映射subProducts，但在第二个对象中，subProducts您有一个Details属性，但没有bookingDetails属性，因此bookingDetails将是未定义的。

因此，您可能想更改Details为bookingDetails：

subProducts: [
  {
    bookingDetails: [
      {
        name: "Birthday Decoration",
        value: "YES",
      },
      {
        name: "Photographer",
        value: "NO",
      },
    ],
    subProductName: "Celebration",
  },
  {
    bookingDetails: [
      {
        name: "Decoration",
        value: "YES",
      },
      {
        name: "Video",
        value: "NO",
      },
    ],
    subProductName: "FamilY",
  },
];

如果 API 返回Details而不是bookingDetails在您的原始问题中返回，则相反。改变它，让它映射过来Details：

所以subProduct.Details.map代替subProduct.bookingDetails.map.

点击时数据未正确显示是因为每个Tab组件都需要有一个tabFor与 a 的 prop 值对应 TabPanel的tabIdprop 值。否则react-web-tabs不知道什么时候显示什么内容。

对于这个例子，我使用了地图的索引并toString在将它传递给道具之前调用它，因为 id 需要是一个字符串。但更自然的id做法是id在您的数据中包含字段并使用这些字段。

示例沙箱

推荐阅读