尝试通过道具将数据映射到 React Bootstrap 手风琴 - 数据未显示?
Trying to map data through props to React Bootstrap Accordion - data not displaying?
我正在尝试通过 props 将我的数据文件中的数据映射到我的 React-Bootstrap Accordion 组件中。我使用的方法会随着我的进步而改变,因为我知道格式不会完全按照我想要的方式前进。
但是我无法实际想象或弄清楚如何正确地构建结构,因为我什至看不到数据或 Accordion 组件显示,但我在控制台中没有收到任何错误。
本质上,我希望能够使用 map 函数使用 props 中的数据创建所有 react-bootstrap 手风琴组件。
代码如下,如果需要更多请告诉我。
Menu.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;
您的代码中几乎没有问题。
1.导入bootstrapcss或者使用bootstrapcdn(更多内容可以阅读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
我正在尝试通过 props 将我的数据文件中的数据映射到我的 React-Bootstrap Accordion 组件中。我使用的方法会随着我的进步而改变,因为我知道格式不会完全按照我想要的方式前进。
但是我无法实际想象或弄清楚如何正确地构建结构,因为我什至看不到数据或 Accordion 组件显示,但我在控制台中没有收到任何错误。
本质上,我希望能够使用 map 函数使用 props 中的数据创建所有 react-bootstrap 手风琴组件。
代码如下,如果需要更多请告诉我。
Menu.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;
您的代码中几乎没有问题。
1.导入bootstrapcss或者使用bootstrapcdn(更多内容可以阅读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