reactjs - Material Ui 选项卡显示来自 Api 调用的数据

Question

我正在从后端获取数据以显示一些用餐信息。有过滤器可以过滤掉每个类别。目前我正在通过单击按钮显示过滤掉的数据。每次我单击一个按钮时，都会显示相应的过滤数据。现在我想要做的不是使用按钮，而是我想使用 Material Ui Tabs component 。我对 Materia Ui 比较陌生。我不明白如何使用 Material Ui Tab 组件显示过滤后的数据。我的代码如下 -

主页.jsx

const value = useContext(DataContext);
  const [foods, setFood] = value.foods;

  const [tabs, setTabs] = useState(["all"]);

  useEffect(() => {
    const filtered = foods.map((food) => ({
      ...food,
      filtered: food.category.includes(tabs),
    }));
    setFood(filtered);
  }, [tabs]);

  const handleFilter = (tabs) => {
    setTabs(tabs);
    console.log(tabs);
    // console.log(foods);
  };

  return (
    
     
        <TabsData handleFilter={handleFilter}></TabsData>
      

标签数据.jsx

const TabsData = ({ handleFilter }) => {
  return (
    <div className="buttons">
      <button className="btn" onClick={() => handleFilter("all")}>
        All
      </button>
      <button className="btn" onClick={() => handleFilter("Salad/Soup")}>
        Salad/Soup
      </button>
      <button
        className="btn"
        onClick={() => handleFilter("Starter/Side Order")}
      >
        Starter/Side Order
      </button>
      <button className="btn" onClick={() => handleFilter("Breakfast Item")}>
        Breakfast Item
      </button>
      <button className="btn" onClick={() => handleFilter("Asian Classic")}>
        Asian Classic
      </button>
      <button className="btn" onClick={() => handleFilter("Chicken")}>
        Chicken
      </button>
      <button className="btn" onClick={() => handleFilter("Pasta")}>
        Pasta
      </button>
      <button className="btn" onClick={() => handleFilter("Western")}>
        Western
      </button>
      <button className="btn" onClick={() => handleFilter("Pizza")}>
        Pizza
      </button>
      <button className="btn" onClick={() => handleFilter("Desert")}>
        Desert
      </button>
    </div>

标签： reactjstabsmaterial-ui

Answer 1

这可以通过 Materia-UI 轻松完成。顺便说一句，文档中有很多示例可以帮助您：https ://material-ui.com/components/tabs/#tabs

回到您的问题：您只需遍历获取的类别并创建一个选项卡和一个 TabPanel（TabPanel 只是一个自定义组件，用于呈现应为特定选项卡显示的内容）。

您的 currentTab 状态决定了哪个选项卡当前处于活动状态并且应该显示。

这是一个例子：

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";

function TabPanel({ children, value, index, ...other }) {
  return (
    <div role="tabpanel" hidden={value !== index} {...other}>
      {value === index && (
        <Box p={3}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

export default function App() {
  const [currentTab, setCurrentTab] = React.useState(0);

  const handleChange = (event, newTab) => {
    setCurrentTab(newTab);
  };
  const fetchedCategories = [
    {
      label: "All",
      description: "All description"
    },
    {
      label: "Salad/Soup",
      description: "Salad/Soup description"
    },
    {
      label: "Starter/Side Order",
      description: "Starter/Side Order description"
    }
  ];

  return (
    <div>
      <AppBar position="static">
        <Tabs
          value={currentTab}
          onChange={handleChange}
          aria-label="simple tabs example"
        >
          {fetchedCategories.map((category) => (
            <Tab key={category.label} label={category.label} />
          ))}
        </Tabs>
      </AppBar>
      {fetchedCategories.map((category, index) => (
        <TabPanel key={category.label} value={currentTab} index={index}>
          {category.description}
        </TabPanel>
      ))}
    </div>
  );
}

现场演示