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

问题描述

我对 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;

应用程序.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 个不同的价格分为这些类别，所以我想将价格分类到每个类别的一个列表中。

关于如何做到这一点的任何提示？如果我做的完全错误，请告诉我。

我希望结果看起来像这样

第一类

类别 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>
)

但不起作用。

最好的问候思科

标签： reactjs

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

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

问题描述

解决方案

推荐阅读