Question

我正在使用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);

当单击类别时（警报只是为了确保可以确保数据已生成），我将其设置为呈现嵌套在所选类别中的Array项。

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

这部分不渲染项目，并且我没有收到错误消息。

我还尝试过将要渲染的项目直接置于状态，以查看是否可以使它们按一下就进行渲染，类似于Categories.js运气不佳。

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

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

Answer 1

问题是您没有呈现从handleClick返回的内容。您需要的是在JSX中进行条件渲染，然后根据状态中的受控标记变量确定是否渲染元素。

class Categories extends Component {
  constructor() {
    this.state = {
      show: false,
      category: undefined
    }

    this.toggle = (category) => {
      this.setState({ show: !this.state.show, category })
    }
  }

  render() {
    let categoryList = this.props.categories.map(category => {
      return (
        <div key={category.id}>
          <Col>
            <Card
              key={category.id}
              onClick={e => this.toggle(category)}
            >
              <CardBody>
                <CardTitle>{category.title}</CardTitle>
              </CardBody>
            </Card>
          </Col>
        </div>
      );
    });
    return ([
      <Container>
        <Row>{categoryList}</Row>
      </Container>,
      (
        this.state.show 
        ? <CategoryItems category={this.state.category}/> 
        : null
      )
    ]);
  }
}

如何在点击时通过传递的道具渲染React组件

1 个答案: