Question

因此，我试图显示带有onclick处理程序的另一个组件。另一个组件正在显示，但是我无法获得所传递组件的道具。我已经在功能组件中传递了（props）kw，但仍然无法获得所需的道具。注意：我也在使用redux。

这是我的Shirts.js文件，我在其中将道具传递给ProductCard.js（另一个组件）：

import React, { Component } from "react";
import {Link} from 'react-router-dom';
//COMPONENTS
import { Container,Row,Col } 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";
import shirts from "../../../assets/Shirts/A-unsplash.jpg";

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

   
  render() {
    const settings = {
      accessibility: true,
      dots: true,
      infinite: true,
      slidesToShow: 4,
      slidesToScroll: 1,
      adaptiveHeight: true,
      autoplay: true,
      speed: 1000,
      autoplaySpeed: 3000,
      focusOnSelect: true,
      rows: 2,
    };

   const ShowComponent = ()=>{
     if (this.state.whichComponentToShow === "FeatureCard") {
      return (
        <div>
          <Link to="/ProductCard-add-to-cart">
          <FeatureCard
            OnClick={() => {
              this.setState({ whichComponentToShow: "ProductCard" });
            }}
            image={img}
            title="Sky Blue"
            price="9$"
          />
          </Link>
        </div>
      );
    } else if (this.state.whichComponentToShow === "ProductCard") {
      return (
        <div>
          <ProductCard 
           image={shirts}
           title="Sky Blue"
           price="9$"
           add="shirt"
           />
        </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()}
            </div>
            </Col>
            <div>
              <FeatureCard image={img2} title="Beach Light" price="25.50$" />
            </div>
            <Col>
            <div>
              <FeatureCard image={img3} title="Official Formal" price="9.99$" />
            </div>
            </Col>
            <Col>
            <div>
              <FeatureCard image={img4} title="Denim" price="19$" />
            </div>
            </Col>
            </Row>
           <Row>
             <Col>
             <div>
              <FeatureCard image={img5} title="Red Black" price="12$" />
            </div>
             </Col>
             <Col>
             <div>
              <FeatureCard image={img6} title="Blue White Denim" price="56$" />
            </div>
             </Col>
             <Col>
             <div>
              <FeatureCard image={img7} title="White Long Sleeve" price="8$" />
            </div>
             </Col>
             <Col>
             <div>
              <FeatureCard image={img8} title="Blue Dotted" price="9.50$" />
            </div>
             </Col>
            </Row>
        </Container>
      </div>
    );
  }
}

export default Shirts;

这是我要获取道具的ProductCard.js文件：

    import React from "react";
import { Container, Row, Col, 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

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}
              className="productImage"
              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("shirt")}
            />

            <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 show={modalShow} onHide={() => setModalShow(false)} />
        </Row>
      </Container>
    </div>
  );
};

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

她是我没有得到道具的结果我没有图像，价格和标题。这些是我作为道具通过的三件事：

如何在功能组件之间获得道具？

0 个答案: