reactjs - 下一个 js 从 Json 的特定项目中获取道具

Question

我有一个带有道具的 json 产品列表，我想通过他的 ID 将那个特定项目的道具带到另一个文件中。如果路线不是动态的，我该怎么做？（通常我会使用 router.query.id）。

这是 json 示例：

export const ArtroscopiaPlus = [

{
    title: 'product 1',
    url: 'https://drive.example1',
    id: 'grapa-iql',
    img: '/img/productos/Artroscopia/img1.jpg'
},

{
    title: 'Product 2',
    url: 'https://drive.example2',
    id: 'kurosaca-romo',
    img: '/img/productos/Artroscopia/img3.jpg'
},
{
    title: 'Product 3',
    url: 'https://drive.example3',
    id: 'tornillo-transversal',
    img: '/img/productos/Artroscopia/img4.jpg'
},

这是我可以注入该道具的代码：

const GrapaIQL = () => {

return (
    <>
        <ItemS>
            <TitleItem className="title-item">{Prop with the title}</TitleItem>
            <ContentItem>
                <ImageDiv className="image-div">
                    <ItemImg src="{prop with the img}" alt={`${titulo} Company`} className="item-img" data-aos="fade-right" />
                </ImageDiv>
                <div className="info-div">
                    <table class="tabla-chica" data-aos="fade-left">
                        
                        (not relevant table content)

                    </table>
                </div>
                <Pdf path='{Prop with the path}' />
            </ContentItem>

            <ScrollArrow />
        </ItemS>

标签： reactjsjsonnext.js