试图通过道具将数据映射到 React Bootstrap Accordion - 数据不显示？

Question

我正在尝试通过 props 将数据文件中的数据映射到我的 React-Bootstrap Accordion 组件中。我使用的方法会随着我的进步而改变，因为我知道格式不会完全符合我想要的前进方式。

但是，我什至看不到数据或 Accordion 组件正在显示，但我实际上无法可视化或弄清楚如何正确构建结构，但我在控制台中没有收到任何错误。

基本上我希望能够使用 map 函数来创建所有 react-bootstrap 手风琴组件，其中包含来自道具的数据。

代码如下，如果需要更多，请告诉我。

菜单.js

import React from "react";
import { Accordion, Button, Card, Jumbotron, Table } from "react-bootstrap";

function Menu(props) {
  return (
    <div>
      <Accordion>
        <Card>
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
              {props.header}
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>
              {props.body}{" "}
              <Button variant="light" className="menu-basket-btn">
                <i class="fas fa-shopping-basket"></i>
              </Button>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
}

export default Menu;

Home.js

import React from "react";
import { Jumbotron } from "react-bootstrap";
import Menu from "../Components/MenuFolder/Menu";

import data from "../Components/MenuFolder/MenuData";

const menuCreator = (item) => {
  <Menu 
    key={item.id} 
    header={item.header} 
    body={item.body} />;
};

function Home() {
  return (
    <div className="home-page">
      <div className="home-jumbotron">
        <Jumbotron>
          <h1>Fresh Asian Cuisine straight to your door!</h1>
          <p>Order direct from our website for the best deals and prices!</p>
        </Jumbotron>
      </div>
      <div className="menu-section">
        <section className="starters">
          <div>
            <h1 className="title">Starters</h1>
            {data.map(menuCreator)}
          </div>
        </section>
        <section className="mains">
          <h1 className="title">Mains</h1>
          <div></div>
        </section>
        <section className="desserts">
          <h1 className="title">Desserts</h1>
        </section>
        <section className="sundries">
          <h1 className="title">Rice</h1>
        </section>
      </div>
    </div>
  );
}

export default Home;

MenuData.js

const data = [
    {
        id: 1,
        header: "Meat Dumplings",
        body: "6pc's - £4.99",
    },
    {
        id: 2,
        header: "Veggie Dumplings",
        body: "6pc's - £3.99",
    },
    {
        id: 3,
        header: "Duck Spring Rolls",
        body: "4pc's - £4.29"
    },
    {
        id: 4,
        header: "Veggie Spring Rolls",
        body: "4pc's - £3.79",
    },
    {
        id: 5,
        header: "Green Thai Curry",
        body: "£9.99"
    },
    {
        id: 5,
        header: "Red Thai Curry",
        body: "£9.99",
    },
    {
        id: 6,
        header: "Pad Thai",
        body: "£12.99"
    },
    {
        id: 7,
        header: "Japanese Curry",
        body: "£10.99"
    },
    {
        id: 8,
        header: "Spicy Sichuan Tofu Noodles",
        body: "£8.99"
    },
    {
        id: 9,
        header: "Tonkotsu Ramen",
        body: "£12.99"
    },
    {
        id: 10,
        header: "Spicy Miso Noodles",
        body: "£7.99"
    },
    {
        id: 11,
        header: "Oyaka Don",
        body: "£8.99"
    },
    {
        id: 12,
        header: "Matcha Brownies",
        body: "£4.99"
    },
    {
        id: 13,
        header: "Salted Caramel Brownies",
        body: "£3.99"
    },
    {
        id: 14,
        header: "Jasmine Rice",
        body: "£2.99"
    },
    {
        id: 15,
        header: "Sticky Japanese Rice",
        body: "£3.99"
    },
    {
        id: 16,
        header: "Basmati Rice",
        body: "£1.99"
    },
    {
        id: 17,
        header: "Egg Fried Rice"
    },
]

export default data;

Answer 1

您的代码中存在一些问题。

1.导入bootstrap css或者使用bootstrap cdn（更多可以阅读here）

import "bootstrap/dist/css/bootstrap.min.css";

2. 你不是returning 菜单组件。应该是这样的：

const menuCreator = (item) => {
  return <Menu key={item.id} header={item.header} body={item.body} />;
};

这是完整的工作演示：https://codesandbox.io/s/inspiring-cloud-10u5z?file=/src/App.js:2042-2147