如何在點擊時使用傳入的道具渲染 React 組件

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

當一個類別被點擊時，（警報只是為了確保數據成功）我將它設置為呈現嵌套在所選類別中的項目數組。

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

這部分不呈現項目，我沒有收到錯誤消息。

我還嘗試將我想要渲染的項目直接放入 state 中，看看是否可以讓它們在單擊時渲染，就像 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
      )
    ]);
  }
}