将一个组件的prop值传递给另一个组件的prop值（此处的prop值不同）

Question

我有一个Code，它只能路由到另一个组件。

Lower.js最终路由到ProductCollection.js和DetailedProduct

为了传递道具，我将ProductCollection Component传递给Collective.js，然后Lower.js接收Collective.js的导出并将其路由。

我只想将CollectiveA，collectiveB，collectiveC，collectivD（collectiveA，collectiveB，collectiveC，collectivD are，属于Collective.js-WrappedCollection文件夹）的值传递到DetailsProduct的照片道具中，并在const detailA，B， C，D（请参见下面的代码）

我要么直接通过src（衬衫，牛仔裤，帽子，鞋子），但一次A，B，​​C，D会保留一个src，而这不能满足我的要求

其中照片和集体A，B，C，D是img标签的src。

ImgComp.js仅用于将图像保存在数组中。

下面是一些代码

Full code of Application

我只想将A，B，C，D集合的src（集合A，B，C，D）转换为以const细节A，B，C，D返回的detailproducts的src（照片），请帮忙！

我尝试了所有可能的方法来解决上述问题，但找不到正确的方法，请帮助找到实施上述计划的正确方法

Lower.js

import React, { Component } from "react";
import style from "./Lower.module.css";

import { Route } from "react-router-dom";

import Detailedproducts from "../Product/Detailedproducts/Detailedproducts";

import { CollectiveA, CollectiveB, CollectiveC, CollectiveD } from "../Product/WrappedCollection/Collective";

class Lower extends Component {
    render() {
        const detailA = () => {
            return <Detailedproducts photo={"I want to pass collectiveA props of ProductCollection (after Wrapping)"} />;
        };
        const detailB = () => {
            return <Detailedproducts photo={"I want to pass collectiveB props of ProductCollection (after Wrapping)"} />;
        };
        const detailC = () => {
            return <Detailedproducts photo={"I want to pass collectiveC props of ProductCollection (after Wrapping)"} />;
        };
        const detailD = () => {
            return <Detailedproducts photo={"I want to pass collectiveD props of ProductCollection (after Wrapping)"} />;
        };

        const collectiveA = () => {
            return (
                < CollectiveA />
            );
        };
        const collectiveB = () => {
            return (
                < CollectiveB />
            );
        };
        const collectiveC = () => {
            return (
                < CollectiveC />
            );
        };
        const collectiveD = () => {
            return (
                < CollectiveD />
            );
        };

        return (
            <div className={style.Lower}>

                <Route path="/category/shirtCollection" component={collectiveA} />
                <Route path="/category/jeansCollection" component={collectiveB} />
                <Route path="/category/shoesCollection" component={collectiveC} />
                <Route path="/category/hatCollection" component={collectiveD} />

                <Route path="/category/productCollection" component={detailA} />
                <Route path="/category/productCollection" component={detailB} />
                <Route path="/category/productCollection" component={detailC} />
                <Route path="/category/productCollection" component={detailD} />

            </div>
        );
    }
}
export default Lower;

Collective.js

import React from "react"
import shirtA from "../../../ImageMarket/Shirts/shirtA.png";
import shirtB from "../../../ImageMarket/Shirts/shirtB.png";
import shirtC from "../../../ImageMarket/Shirts/shirtC.png";
import shirtD from "../../../ImageMarket/Shirts/shirtD.png";

import jeansA from "../../../ImageMarket/Jeans/jeansA.png";
import jeansB from "../../../ImageMarket/Jeans/jeansB.png";
import jeansC from "../../../ImageMarket/Jeans/jeansC.png";
import jeansD from "../../../ImageMarket/Jeans/jeansD.png";

import shoesA from "../../../ImageMarket/Shoes/shoesA.png";
import shoesB from "../../../ImageMarket/Shoes/shoesB.png";
import shoesC from "../../../ImageMarket/Shoes/shoesC.png";
import shoesD from "../../../ImageMarket/Shoes/shoesD.png";

import hatA from "../../../ImageMarket/Hat/hatA.png";
import hatB from "../../../ImageMarket/Hat/hatB.png";
import hatC from "../../../ImageMarket/Hat/hatC.png";
import hatD from "../../../ImageMarket/Hat/hatD.png";

import ProductCollection from "../ProductCollection/ProductCollection";


export const CollectiveA = () => {
    return (
        <div>
            < ProductCollection
                collectionA={shirtA}
                collectionB={shirtB}
                collectionC={shirtC}
                collectionD={shirtD}
            />
        </div>
    )
}

export const CollectiveB = () => {
    return (
        <ProductCollection
            collectionA={jeansA}
            collectionB={jeansB}
            collectionC={jeansC}
            collectionD={jeansD}
        />
    );
};

export const CollectiveC = () => {
    return (
        <ProductCollection
            collectionA={shoesA}
            collectionB={shoesB}
            collectionC={shoesC}
            collectionD={shoesD}
        />
    );
};

export const CollectiveD = () => {
    return (
        <ProductCollection
            collectionA={hatA}
            collectionB={hatB}
            collectionC={hatC}
            collectionD={hatD}
        />
    );
};

ProductCollection.js

import React, { Component } from "react";
import style from "./ProductCollection.module.css";
import ImgComp from "./ImgComp"
import { Link } from "react-router-dom";

class ProductCollection extends Component {
    render() {
        return (
            <div className={style.ProductCollection}>

                <Link to="/category/productCollectionA">
                    <ImgComp src={this.props.collectionA} />
                </Link>
                <Link to="/category/productCollectionB">
                    <ImgComp src={this.props.collectionB} />
                </Link>
                <Link to="/category/productCollectionC">
                    <ImgComp src={this.props.collectionC} />
                </Link>
                <Link to="/category/productCollectionD">
                    <ImgComp src={this.props.collectionD} />
                </Link>
            </div>
        );
    }
}

export default ProductCollection;

DetailedProducts.js

import React from "react";
import "./Detailedproducts.scss";
import ImgComp from "./ImgComp";

function Detailedproducts(props) {
    const imageArr = [
        <ImgComp src={props.photo} />,
    ];

    return (
        <div className="mainBody" >
            <div className="Detailedproducts">
                {imageArr.map((images, index) => {
                    return (
                        <div key={index} className="DetailedproductsSlide"
                        >
                            {images}
                        </div>
                    );
                })}
            </div>
        </div>
    );
}
export default Detailedproducts;

ImgComp.js

import React from "react";

function ImgComp({ src }) {

    return <img src={src} alt="error" ></img>;
}
export default ImgComp;