时间戳

首页 > 解决方案 > 如何在功能组件之间获取道具？

javascript - 如何在功能组件之间获取道具？

问题描述

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

这是我将道具传递给 ProductCard.js（另一个组件）的 Shirts.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);

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

标签： javascriptreactjsreduxreact-reduxreact-props

解决方案

推荐阅读