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

我有一个代码，它只是路由到另一个组件

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

为了传递道具，我将ProductCollection组件传递到Collective.js，然后Lower.js获取Collective.js的导出并将其路由

我只想把collectiveA，collectiveB，collectiveC，collectivD（collectiveA，collectiveB，collectiveC，collectivD是Collective.js-WrappedCollection文件夹的）的值传递到DetailedProduct的照片道具中，DetailedProduct在const detailea，B，C，D中使用（参见下面的代码）

或者我会直接通过src（衬衫、牛仔裤、帽子、鞋子），但a、B、C、D会同时持有一个src，这不符合我的要求

其中照片和集合A、B、C、D是img标签的src

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

下面是一些代码

我只想把收集A、B、C、D的src（收集A、B、C、D）转换成以const detailsA、B、C、D返回的详细产品的src（照片），请帮助

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

Lower.js

import React，{Component}来自“React”；
从“/Lower.module.css”导入样式；
从“react router dom”导入{Route}；
从“./Product/Detailedproducts/Detailedproducts”导入Detailedproducts；
从“./Product/WrappedCollection/Collective”导入{CollectiveA，CollectiveB，CollectiveC，CollectiveD}”；
类较低的扩展组件{
render（）{
const detailA=（）=>{
返回；
};
const detailB=（）=>{
返回；
};
const detailC=（）=>{
返回；
};
const detailD=（）=>{
返回；
};
const collectiveA=（）=>{
返回(

);
};
const collectiveB=（）=>{
返回(

);
};
const collectiveC=（）=>{
返回(

);
};
const collectiveD=（）=>{
返回(

);
};
返回(
);
}
}
出口违约率较低