使用条件const反应调用函数并返回

时间:2019-02-24 21:35:42

标签: reactjs

我真的是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>
)

但是不起作用。

最佳问候 思科

1 个答案:

答案 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;
  });

工作!