Reactjs在点击和不重新渲染时未显示确切的组件

如何解决Reactjs在点击和不重新渲染时未显示确切的组件

如果我单击FeatureCard组件，我一直在尝试在React-Bootstrap模式中显示ProductCard组件。这两个组件都是可重用的组件。我在2行中有8个FeatureCard组件，每个FeaturCard + ProductCard组件具有相似的图像，标题和价格道具。因此，如果我单击相关的FeatureCard组件，我想显示相关的ProductCard组件。

现在，下面的给定代码由我编写，我是js和Reactjs的初学者。请查看代码，并帮助我解决以下这三件事：

如果我单击FeatureCrad组件，则不会在模态内显示相关的ProductCard组件
如果我单击模式的关闭按钮，则每个FeatureCard组件都会消失（不会重新呈现为先前的状态
我编写的代码很糟糕，可以为我编写更好的代码

注意：我想要一个简单的结果：如果单击功能卡[0]，则要显示productCard [0]，依此类推。我已经在这个问题上停留了4天了。请帮我摆脱这个问题。预先感谢。

这是我的Shirt.js文件，上面的所有问题均在此文件中出现：

import React,{ Component,useState } from "react";
import { Link } from "react-router-dom";
//COMPONENTS
import { Container,Row,Col,Modal,Button } from "react-bootstrap";
import FeatureCard from "../../widgets/ShoppingCards/FeatureCard/FeatureCard";
import AllDressHeader from "../../widgets/AllDressHeader/AllDressHeader";
import ProductCard from "../../widgets/ShoppingCards/ProductCard/ProductCard";
import Slider from "react-slick";

//Images
import ShirtHeader from "../../../assets/Shirts/header-new.jpg";
import img from "../../../assets/Shirts/A-unsplash.jpg";
import img2 from "../../../assets/Shirts/ocean-shirt.jpg";
import img3 from "../../../assets/Shirts/L-unsplash.jpg";
import img4 from "../../../assets/Shirts/denim.jpg";
import img5 from "../../../assets/Shirts/R-unsplash.jpg";
import img6 from "../../../assets/Shirts/P-denim.jpg";
import img7 from "../../../assets/Shirts/Q-unsplash.jpg";
import img8 from "../../../assets/Shirts/Y-unsplash.jpg";
import img9 from "../../../assets/Shirts/Mens-Popover.jpg";
import img10 from "../../../assets/Shirts/blur-shirt.jpg";

class Shirts extends Component {
  state = {
    whichComponentToShow: "FeatureCard",show: false,};

  onClick = () => {
    this.setState({ whichComponentToShow: "ProductCard",show: true });
  };

  handleClose = () => {
    this.setState({ show: false });
  };
  handleShow = () => {
    this.setState({ show: true });
  };

  render() {
    //FeatureCard components in array
    const featureCard = [
      <FeatureCard
        onClick={this.onClick}
        image={img}
        title="Sky Blue"
        price="9$"
      />,<FeatureCard
        onClick={this.onClick}
        image={img2}
        title="Beach Light"
        price="25.50$"
      />,<FeatureCard
        image={img3}
        onClick={this.onClick}
        title="Official Formal"
        price="9.99$"
      />,<FeatureCard
        onClick={this.onClick}
        image={img4}
        title="Denim"
        price="19$"
      />,<FeatureCard
        onClick={this.onClick}
        image={img5}
        title="Red Black"
        price="12$"
      />,<FeatureCard
        onClick={this.onClick}
        image={img6}
        title="Blue White Denim"
        price="56$"
      />,<FeatureCard
        onClick={this.onClick}
        image={img7}
        title="White Long Sleeve"
        price="8$"
      />,<FeatureCard
        onClick={this.onClick}
        image={img8}
        title="Blue Dotted"
        price="9.50$"
      />,];
    //ProductCard Components in array 
    const productCard = [
      <ProductCard image={img} title="Sky Blue" price="9$" add="shirt" />,<ProductCard
        image={img2}
        title="Beach Light"
        price="25.50$"
        add="shirt"
      />,<ProductCard
        image={img3}
        title="Official Formal"
        price="9.99$"
        add="shirt"
      />,<ProductCard image={img4} title="Denim" price="19$" add="shirt" />,<ProductCard image={img5} title="Red Black" price="12$" add="shirt" />,<ProductCard
        image={img6}
        title="Blue White Denim"
        price="56$"
        add="shirt"
      />,<ProductCard
        image={img7}
        title="White Long Sleeve"
        price="8$"
        add="shirt"
      />,<ProductCard
        image={img8}
        title="Blue Dotted"
        price="9.50$"
        add="shirt"
      />
    ];
   
    //Which modal to show on <FaetureCard> Click 
    let modalToShow = (modal) => {
      return (
        <Modal
          show={this.state.show}
          onHide={this.handleClose}
          centered
          size="xl"
        >
          <Modal.Header closeButton></Modal.Header>
          <Modal.Body>
            <Container fluid>
              <Row>
                <Col lg={12}> {modal}</Col>
              </Row>
            </Container>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={this.handleClose}>
              Close
            </Button>
          </Modal.Footer>
        </Modal>
      );
    };
    
    //WHICH COMPONENT TO SHOW
    const showComponent = (component,component2) => {
      if (
        this.state.whichComponentToShow === "FeatureCard" &&
        component === featureCard[0]
      ) {
        return <div>{featureCard[0]}</div>;
      } else if (
        this.state.whichComponentToShow === "FeatureCard" &&
        component === featureCard[1]
      ) {
        return <div>{featureCard[1]}</div>;
      } else if (
        this.state.whichComponentToShow === "FeatureCard" &&
        component === featureCard[2]
      ) {
        return <div>{featureCard[2]}</div>;
      } else if (
        this.state.whichComponentToShow === "FeatureCard" &&
        component === featureCard[3]
      ) {
        return <div>{featureCard[3]}</div>;
      } else if (
        this.state.whichComponentToShow === "FeatureCard" &&
        component === featureCard[4]
      ) {
        return <div>{featureCard[4]}</div>;
      } else if (
        this.state.whichComponentToShow === "FeatureCard" &&
        component === featureCard[5]
      ) {
        return <div>{featureCard[5]}</div>;
      } else if (
        this.state.whichComponentToShow === "FeatureCard" &&
        component === featureCard[6]
      ) {
        return <div>{featureCard[6]}</div>;
      } else if (
        this.state.whichComponentToShow === "FeatureCard" &&
        component === featureCard[7]
      ) {
        return <div>{featureCard[7]}</div>;
      } else if (this.state.whichComponentToShow === "ProductCard" && component2 === productCard[0]) {
        return <div>{modalToShow(productCard[0])}</div>;
      }else if (this.state.whichComponentToShow === "ProductCard" && component2 === productCard[1]) {
        return <div>{modalToShow(productCard[1])}</div>;
      }
      else if (this.state.whichComponentToShow === "ProductCard" && component2 === productCard[2]) {
        return <div>{modalToShow(productCard[2])}</div>;
      }
      else if (this.state.whichComponentToShow === "ProductCard" && component2 === productCard[3]) {
        return <div>{modalToShow(productCard[3])}</div>;
      }
      else if (this.state.whichComponentToShow === "ProductCard" && component2 === productCard[4]) {
        return <div>{modalToShow(productCard[4])}</div>;
      }
      else if (this.state.whichComponentToShow === "ProductCard" && component2 === productCard[5]) {
        return <div>{modalToShow(productCard[5])}</div>;
      }
      else if (this.state.whichComponentToShow === "ProductCard" && component2 === productCard[6]) {
        return <div>{modalToShow(productCard[6])}</div>;
      }
      else if (this.state.whichComponentToShow === "ProductCard" && component2 === productCard[7]) {
        return <div>{modalToShow(productCard[7])}</div>;
      }
    };

     


    return (
      <div className="Shirts" style={{ margin: "3rem 0rem" }}>
        <div>
          <AllDressHeader
            Image={ShirtHeader}
            h1="SHIRTS FOR MEN"
            para="Id adipisicing elit adipisicing Lorem. Laborum deserunt laboris ex aliqua deserunt ipsum irure culpa pariatur in esse esse quis. Laboris incididunt enim velit reprehenderit irure. Do est deserunt sint."
            h2="CHOOSE YOUR FAVOURITE SHIRT NOW"
          />
        </div>
        <Container>
          <Row>
            <Col>
              <div>{showComponent(featureCard[0],productCard[0])}</div>
            </Col>
            <Col>
              <div>{showComponent(featureCard[1],productCard[1])}</div>
            </Col>
            <Col>
              <div>{showComponent(featureCard[2],productCard[2])}</div>
            </Col>
            <Col>
              <div>{showComponent(featureCard[3],productCard[3])}</div>
            </Col>
          </Row>
          <Row>
            <Col>
              <div>{showComponent(featureCard[4],productCard[4])}</div>
            </Col>
            <Col>
              <div>{showComponent(featureCard[5],productCard[5])}</div>
            </Col>
            <Col>
              <div>{showComponent(featureCard[6],productCard[6])}</div>
            </Col>
            <Col>
              <div>{showComponent(featureCard[7],productCard[7])}</div>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Shirts;

这是我的组成部分：

import React,{useState} from "react";
import { Card } from "react-bootstrap";
import "./FeatureCard.css";

const FeatureCard = (props) => {
  console.log(props);
  return (
    <div  onClick={props.onClick} className="FeatureCard">
      
      <div style={{textDecoration:'none',color:'#000'}}>
        <Card
          style={{
            width: "18rem",paddingLeft: "20px",paddingRight: "20px",overflow: "hidden",}}
        >
          <div className="cardImg">
            <Card.Img variant="top" src={props.image} className="ppImage" />
          </div>
          <Card.Body>
            <div className="d-flex flex-column">
              <div
                style={{ paddingBottom: "10px" }}
                className="d-flex flex-row justify-content-between"
              >
                <p>
                  <b>{props.title}</b>
                </p>
                <h6>{props.price}</h6>
              </div>
              <div className="colors-circle">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
          </Card.Body>
        </Card>
      </div>
    </div>
  );
};

export default FeatureCard;

这里是组件：

import React from "react";
import { Container,Image,Tab,Nav } from "react-bootstrap";

//COMPONENTS
import payoneer from "../../../../assets/Payoneer_logo.svg.png";
import OurPP from "../../../OurPP/OurPP";
import ActionBtn from "../../Buttons/ActionBtn/ActionBtn";
import ModalButton from "../../ModalButton/ModalButton";
import "./ProductCard.css";
//REDUX
import { addBasket } from "../../../../actions/addAction";
import { connect } from "react-redux";

//Image
import sizechart from '../../../../assets/size-chart.png'


const ProductCard = (props) => {
  const [modalShow,setModalShow] = React.useState(false);
  
  return (
    <div
      className="ProductCard"
      style={{ marginTop: "3rem",marginBottom: "3rem" }}
    >
      <Container>
        <Row>
          <Col className="d-flex justify-content-center text-center align-center">
            <Image
              src={props.image}
              style={{
                height: "625px",width: "425px",margin: "5px",cursor: "zoom-in",}}
            />
          </Col>
          <Col>
            <div>
              <h3>{props.title}</h3>
              <b>Price:</b>
              <span> {props.price}</span>
              <p>
                Pay with{" "}
                <img
                  src={payoneer}
                  style={{
                    height: "24px",padding: "0px 2px",display: "inline-block",}}
                />{" "}
                to get 5% off
              </p>
            </div>
            <div
              style={{
                backgroundColor: "goldenrod",height: "3px",width: "90%",}}
            ></div>
            <div style={{ margin: "7px 0px" }}>
              <b>Color:</b> <span> SkyBlue</span>
              <div className="colors-circle" style={{ margin: "7px 0px" }}>
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
            <div className="productSizes">
              <b>Sizes: </b>
              <br />
              <p>
                <span>S</span>
                <span>M</span>
                <span>L</span>
                <span>XL</span>

                <a href="#" onClick={() => setModalShow(true)}>
                  View size chart
                </a>
              </p>
            </div>
            
            {/* ADDTOCART-BUTTON */}
            <ActionBtn
              cta="ADD TO CART"
              onClick={() => props.addBasket(props.add)}
            />

            <div style={{ color: "black",margin: "10px 0px" }}>
              <Tab.Container defaultActiveKey="first">
                <Row>
                  <Col>
                    <Nav className="d-flex flex-row justify-content-center text-center">
                      <Nav.Item>
                        <Nav.Link eventKey="first">Details</Nav.Link>
                      </Nav.Item>
                      <Nav.Item>
                        <Nav.Link eventKey="second">Description</Nav.Link>
                      </Nav.Item>
                      <Nav.Item>
                        <Nav.Link eventKey="third">Reviews</Nav.Link>
                      </Nav.Item>
                    </Nav>
                  </Col>
                </Row>
                <Row>
                  <Col>
                    <Tab.Content>
                      <Tab.Pane eventKey="first">
                        <ul>
                          <li>150 GSM striped knit</li>
                          <li>Crew neckline</li>
                          <li>Light weight</li>
                          <li>Super Comfortabble</li>
                          <li>Best Quality 100% Guaranteed</li>
                        </ul>
                      </Tab.Pane>
                      <Tab.Pane eventKey="second">
                        <div className="productDescription">
                          <h3>About The Product</h3>
                          <p>
                            Aliqua laboris amet in irure culpa voluptate
                            consequat proident commodo fugiat quis laborum. Id
                            adipisicing culpa tempor consequat consectetur
                            dolore minim ipsum.
                            <br />
                            Nisi incididunt officia labore adipisicing ex quis
                            nulla elit duis nulla ea cupidatat magna amet.
                            Labore culpa ad eu nulla exercitation labore dolor
                            minim cillum deserunt aliquip est mollit
                            consectetur. Aute et do pariatur labore. Eiusmod
                            occaecat nulla voluptate incididunt ea tempor quis
                            aute exercitation excepteur.
                          </p>
                        </div>
                      </Tab.Pane>
                      <Tab.Pane eventKey="third">
                        <div>5***** : 102person</div>
                        <div>4**** : 12person</div>
                        <div>3*** : 4person</div>
                      </Tab.Pane>
                    </Tab.Content>
                  </Col>
                </Row>
              </Tab.Container>
            </div>
          </Col>
        </Row>
        <Row>
          <div
            style={{
              margin: "2rem 0px",textAlign: "center",}}
          >
            <h3
              style={{
                fontSize: "2rem",textTransform: "uppercase",marginBottom: "2rem",}}
            >
              Related Products
            </h3>
            <OurPP />
          </div>
          <ModalButton  image={sizechart} show={modalShow} onHide={() => setModalShow(false)} />
        </Row>
      </Container>
    </div>
  );
};

export default connect(null,{ addBasket }) (ProductCard);

Reactjs在点击和不重新渲染时未显示确切的组件

如何解决Reactjs在点击和不重新渲染时未显示确切的组件

相关推荐