我真的是React的新手,试图学习基础知识,所以我只是在做一个简单的小项目,以显示来自不同类别的一些价格,就像一个学习项目一样。但是,我被困在有条件的情况下从另一个函数获取数据。
这是我当前的代码
PriceList.js
import React from 'react';
import ListGroup from 'react-bootstrap/ListGroup';
import './PriceList.css';
function CategoryList(props) {
const categories = props.categories.map((cat) =>
<ListGroup variant="flush">
{cat.title}
{PriceList.content}
</ListGroup>
)
return (
<div className="PriceList col-md-4">
{categories}
</div>
);
}
function PriceList(props) {
const content = <ListGroup.Item>{props.service} - {props.price}:-</ListGroup.Item>;
return (
{content}
);
}
export const Categories = [
{id: 1, title: 'Category 1'},
{id: 2, title: 'Category 2'}
];
export const Prices = [
{id: 1, catid: 1, service: 'Category 1 Price 1', price: 199},
{id: 2, catid: 1, service: 'Category 1 Price 2', price: 99},
{id: 3, catid: 1, service: 'Category 1 Price 3', price: 199},
{id: 4, catid: 2, service: 'Category 2 Price 1', price: 99},
{id: 5, catid: 2, service: 'Category 2 Price 2', price: 199},
];
export default CategoryList;
App.js
import React from 'react';
import header from './header.jpg';
import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
import Button from 'react-bootstrap/Button';
import './App.css';
import CategoryList from "./components/PriceList";
import {Categories} from "./components/PriceList";
function App() {
return (
<div className="App">
<div className="App-header">
<img src={header} alt="Header" width="100%" />
<div className="App-link">
<ButtonToolbar>
<Button variant="outline-secondary">Stockholm</Button>
<Button variant="outline-secondary">Horndal</Button>
</ButtonToolbar>
</div>
</div>
<CategoryList categories={Categories} />
</div>
);
}
也许您理解我要做什么,但无论如何我都会解释。 我得到2个类别,将5个不同的价格划分为thoose类别,因此我想将这些价格分类为一个类别。
有关如何执行此操作的任何提示?如果我做错了,请告诉我。
我希望结果看起来像这样
类别1
类别1价格1 类别1价格2 类别1价格3
类别2
类别1价格1 类别1价格2
将PriceList.js更新为此
import React from 'react';
import ListGroup from 'react-bootstrap/ListGroup';
import './PriceList.css';
function CategoryList(props) {
const categories = props.categories.map((cat) =>
<ListGroup variant="flush">
{cat.title}
<PriceList prices={Prices} />
</ListGroup>
)
return (
<div className="PriceList col-md-4">
{categories}
</div>
);
}
function PriceList(props) {
const content = props.prices.map((price) =>
<ListGroup.Item>{price.service} - {price.price}:-</ListGroup.Item>
)
return (
<>
{content}
</>
);
}
export const Categories = [
{id: 1, title: 'Category 1'},
{id: 2, title: 'Category 2'}
];
export const Prices = [
{id: 1, catid: 1, service: 'Category 1 Price 1', price: 199},
{id: 2, catid: 1, service: 'Category 1 Price 2', price: 99},
{id: 1, catid: 1, service: 'Category 1 Price 3', price: 199},
{id: 2, catid: 2, service: 'Category 2 Price 1', price: 99},
{id: 1, catid: 2, service: 'Category 2 Price 2', price: 199},
];
export default CategoryList;
现在它确实将所有内容打印两次。因此,它将同时打印类别1和类别2中的所有价格。
认为我可以使用类似的东西
const content = props.prices.find(props.prices.catid === props.catid).map((price) =>
<ListGroup.Item>{price.service} - {price.price}:-</ListGroup.Item>
)
但是不起作用。
最佳问候 思科
答案 0 :(得分:0)
所以我设法弄清楚了。将PriceList功能更新为此
const content = props.prices.map((price) => {
var item;
if(price.catid === props.catid) {
item = <ListGroup.Item>{price.service} - {price.price}:-</ListGroup.Item>;
} else {item = null;}
return item;
});
工作!