Javascript 如何在单击时使用传入的道具渲染React组件

我正在使用React和Redux制作一个菜单，但是当用户选择一个类别时，当前在呈现项目时遇到了一个问题

我的目标是在单击某个特定类别时呈现嵌套在该类别的redux状态中的项目列表

在Categories.js中，它从redux商店加载类别并显示它们

import React, { Component } from "react";
import { connect } from "react-redux";
import CategoryItems from "./CategoryItems"
import {
  Card,
  CardTitle,
  CardImg,
  Container,
  Row,
  Col,
  CardBody,
  Button
} from "shards-react";

class Categories extends Component {
  handleClick = category => {

    alert(category.title);

   return (
     <CategoryItems 
      category={category}
     />

   );

  };

  render() {
    let categoryList = this.props.categories.map(category => {
      return (
        <div key={category.id}>
          <Col>
            <Card
              key={category.id}
              onClick={() => {
                this.handleClick(category);
              }}
            >
              <CardBody>
                <CardTitle>{category.title}</CardTitle>
              </CardBody>
            </Card>
          </Col>
        </div>
      );
    });
    return (
      <Container>
        <Row>{categoryList}</Row>
      </Container>
    );
  }
}

const mapStateToProps = state => {
  return {
    categories: state.categories,


  };
};

export default connect(mapStateToProps)(Categories);

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“/CategoryItems”导入类别项
进口{
卡片
名片，
卡迪姆，
集装箱，
一行
上校，
名片夹，
按钮
}从“碎片反应”；
类类别扩展组件{
handleClick=类别=>{
警报（类别、标题）；
返回(
);
};
render（）{
让categoryList=this.props.categories.map（category=>{
返回(
{
本.handleClick（类别）；
}}
>
{category.title}
);
});
返回(
{类别列表}
);
}
}
常量mapStateToProps=状态=>{
返回{
类别：state.categories，
};
};
导出默认连接（MapStateTops）（类别）；

单击某个类别时，（该警报只是为了确保数据成功），我将其设置为呈现嵌套在所选类别中的items数组

import React, { Component } from 'react'
import {
    Card,
    CardTitle,
    CardImg,
    Container,
    Row,
    Col,
    CardBody,
    Button
  } from "shards-react";



export class CategoryItems extends Component {
    render() {
        let items = this.props.category.items;

        let categoryItems = items.map(item => {
            return (
              <Col className="">
                <Card
                  className="mt-2 mb-2 item-col"
                  style={{ maxWidth: "500px" }}
                  key={item.id}
                >
                  <CardBody>
                    <CardTitle style={{ position: "absolute", top: 20, right: 20 }}>
                      {item.title}
                    </CardTitle>
                    <CardImg
                      style={{ maxWidth: "200px" }}
                      src={item.img}
                      alt={item.title}
                    />
                    <span
                      style={{ position: "absolute", bottom: 40, right: 100 }}
                      to="/"
                      // onClick={() => {
                      //   this.handleClick(item.id);
                      // }}
                    >
                      <Button pill theme="info">
                        +
                      </Button>
                    </span>
                    <div style={{ position: "absolute", bottom: 40, right: 20 }}>
                      ${item.price}
                    </div>
                  </CardBody>
                </Card>
              </Col>
            );
          });
          return (
            <Container className="menu-item-cont">
              <Row>{categoryItems}</Row>
            </Container>
          );
    }
}

export default CategoryItems

import React，{Component}来自“React”
进口{
卡片
名片，
卡迪姆，
集装箱，
一行
上校，
名片夹，
按钮
}从“碎片反应”；
导出类CategoryItems扩展组件{
render（）{
让items=this.props.category.items；
让categoryItems=items.map（item=>{
返回(
{item.title}
{
//此.handleClick（项目id）；
// }}
>
+
${item.price}
);
});
返回(
{categoryItems}
);
}
}
导出默认类别项

此部分不呈现项目，并且我没有收到错误消息

我还尝试将我想要渲染的项目直接放置到状态中，只是想看看是否可以让它们在单击时渲染，就像Categories.js没有运气一样

我有点新的反应，所以请原谅我，如果这是一个初学者的问题

---

非常感谢您的帮助，因为我花了数小时试图解决这个问题。

问题是您没有呈现从

handleClick

返回的内容。您需要的是JSX中的条件呈现，然后根据状态中的受控标志变量确定是否呈现元素

类类别扩展组件{
构造函数（）{
此.state={
秀:假,，
类别：未定义
}
this.toggle=（类别）=>{
this.setState（{show:！this.state.show，category}）
}
}
render（）{
让categoryList=this.props.categories.map（category=>{
返回(
this.toggle（category）}
>
{category.title}
);
});
返回([
{类别列表}
,
(
这个州的节目
?  
：null
)
]);
}
}

您需要使用state来保留要展开的类别。看见从onClick处理程序返回JSX本身不会做任何事情。