REACT - 多个选项卡不起作用，headers 和 body 不显示

Question

我尝试在 React 中使用多个选项卡。但它似乎不起作用（请看图片）。我无法为我的 Tabs 显示 header，body（来自 match.json) 应该包含 textbox field 作为输入...

import React from "react";
import { Tab, Tabs as TabsComponent, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";

const Tabs = ({ data }) => (
  <TabsComponent>
    <TabList>
      {data.map(({ name }, i) => (
        <Tab key={i}>{name}</Tab>
      ))}
    </TabList>
    {data.map(({ name }, i) => (
      <TabPanel key={i}>{name}</TabPanel>
    ))}
  </TabsComponent>
);

export default Tabs;

菜单项显示：

 export default function MenuItemDisplay() {
  const { match } = JsonData;
  ...
        <Tabs data={match.questions[0]} />
      </div>
    </>
  );
}

match.json :

 {
  "match": [
    {
      ...
      "_ids": [
          "questions": [
            {
              "name": "Tell me about yourself ",
              "typeProof": ""
            },
            ...
          ],
        ]
      }
    ]
}

Answer 1

您要发送到 Tabs 组件的数据是当前匹配项的 questions 数组。

const { menuId, itemId } = useParams();
const { match } = JsonData;

const matchData = match.find((el) => el._id_menu === menuId)?._ids ?? [];
const item = matchData.find((el) => el._id === itemId);

此处 item 是正在呈现的当前菜单项，“豌豆汤”，或 "123ml66" 项，例如：

{
  "_id": "123ml66",
  "name": "Pea Soup",
  "description": "Creamy pea soup topped with melted cheese and sourdough croutons.",
  "dishes": [
    {
      "meat": "N/A",
      "vegetables": "pea"
    }
  ],
  "questions": [
    {
      "name": "Tell me about yourself ",
      "typeProof": ""
    },
    {
      "name": "Why our restaurant?",
      "typeProof": ""
    },
    {
      "name": "What hours are you available to work ?",
      "typeProof": "Planning"
    }
  ],
  "invited": [
    {
      "name": "Jose Luis",
      "location": "LA"
    },
    {
      "name": "Smith",
      "location": "New York"
    }
  ],
  "taste": "Good",
  "comments": "3/4",
  "price": "Low",
  "availability": 0,
  "trust": 1
},

将 item.questions 传递给 Tabs 组件。

<Tabs data={item.questions} />

...

const Tabs = ({ data }) => (
  <TabsComponent>
    <TabList>
      {data.map(({ name }, i) => (
        <Tab key={name}>Question {i + 1}</Tab>
      ))}
    </TabList>
    {data.map(({ name }) => (
      <TabPanel key={name}>{name}</TabPanel>
    ))}
  </TabsComponent>
);

REACT - 多个选项卡不起作用，headers 和 body 不显示

REACT- Multiple Tabs don't work, headers and body don't diplayed

javascript

tabs

reactjs

react-hooks