Javascript 从Reactjs中的卡组件重定向到描述页面

感谢你的帮助

我试图实现的是，点击cardlist组件，它必须打开相应的产品详细信息页面，就像电子商务网站一样。 我创造了：

卡片列表组件、卡片组件、数据（其中包含 对象）和singleCardComponent（即描述页组件） 我想我在卡片列表组件中犯了一个错误。

我一直在思考如何重定向到相应的产品页面

    //--------------------card component--------------------
class Card extends Component {
    render() {
        return (
            <div className='col-md-3 col-10 mx-auto mb-4'>
                <div className="card">
                    <img src={this.props.imgsrc} className="card-img-top" alt="..." />
                    <div className="card-body">
                        <h5 className="card-title">Rs {this.props.price}</h5>
                        <p className="card-text">{this.props.title}</p>
                        <p className='card-date d-flex justify-content-end'>Oct 29</p>
                    </div>
                </div>
            </div>
        )
    }
}

//--------------------cardlist component--------------------
class CardList extends Component {
    show_component = (i) => {
        Data.map((v) => {
            return <SingleCardComp
                key={i}
                imgsrc={v.imgsrc}
                price={v.price}
                title={v.title}
                seller={v.seller_desc}
                desc={v.description}
                loc={v.location}
            />
        })

    }
    render() {
        return (
            <div className='row'>
                {
                    Data.map((val, i) => {
                        return <button onClick={()=>this.show_component(i)}>
                            <Card
                                key={i}
                                imgsrc={val.imgsrc}
                                price={val.price}
                                title={val.title}
                            />
                        </button>
                    })
                }
            </div>
        )
    }
}
//--------------------Data--------------------
const Data = [
    {
        imgsrc: image0,
        title: "Samsung A50",
        price: 35500,
        seller_desc: 'Bilal',
        description: "Lorem, ipsum dolor sit",
        location:'Kansas'
    }
];

//--------------------SingleCardComp--------------------
class SingleCardComp extends Component {
    render() {
        return (
            <div>
                <img src={this.props.imgsrc} alt="..." />
                <h5>Rs {this.props.price}</h5>
                <p >{this.props.title}</p>
                <h1>
                    Description:{this.props.desc}
                </h1>
                <h1>
                    Seller Details:{this.props.seller}
                </h1>
                <h1>
                    Posted in:{this.props.loc}
                </h1>
            </div>
        )
    }
}

/--------------卡组件--------------------
类卡扩展组件{
render（）{
返回(
Rs{this.props.price}
{this.props.title}
10月29日
)
}
}
//--------------------卡片列表组件--------------------
类CardList扩展组件{
显示组件=（i）=>{
数据映射（（v）=>{
返回
})
}
render（）{
返回(
{
Data.map（（val，i）=>{
返回此。显示\u组件（i）}>
})
}
)
}
}
//--------------------资料--------------------
常数数据=[
{
imgsrc:image0，
标题：“三星A50”，
价格：35500，
卖方描述：“Bilal”，
描述：“Lorem，ipsum dolor sit”，
地点：'堪萨斯'
}
];
//--------------------单卡公司--------------------
类SingleCardComp扩展组件{
render（）{
返回(
Rs{this.props.price}
{this.props.title}

描述：{this.props.desc}
卖家详细信息：{this.props.Seller}
发布于：{this.props.loc}
)
}
}

---

显示组件方法似乎是这里的问题

在show\u组件方法中，

数据

是什么意思？这与

CardList->render

方法中使用的数组相同吗？如果是这种情况，您需要做的是像这样更新show_组件方法

 show_component = (i) => {
    Data.map((v, index) => {
        if(index === i) {
            return <SingleCardComp
            key={i}
            imgsrc={v.imgsrc}
            price={v.price}
            title={v.title}
            seller={v.seller_desc}
            desc={v.description}
            loc={v.location}
        />
        }
    })

}

render() {
    return (
        <div className='row'>
            {
                Data.map((val, i) => {
                    return <button onClick={()=>this.show_component(val, i)}>
                        <Card
                            key={i}
                            imgsrc={val.imgsrc}
                            price={val.price}
                            title={val.title}
                        />
                    </button>
                })
            }
            {this.state.showSingleCardComp && (
            <SingleCardComp
                key={this.state.selectedItemIndex}
                imgsrc={this.state.selectedItem.imgsrc}
                price={this.state.selectedItem.price}
                title={this.state.selectedItem.title}
                seller={this.state.selectedItem.seller_desc}
                desc={this.state.selectedItem.description}
                loc={this.state.selectedItem.location}
             />
            )}
        </div>
    )
}

然后像这样调用show_component方法

 show_component = (i) => {
    Data.map((v, index) => {
        if(index === i) {
            return <SingleCardComp
            key={i}
            imgsrc={v.imgsrc}
            price={v.price}
            title={v.title}
            seller={v.seller_desc}
            desc={v.description}
            loc={v.location}
        />
        }
    })

}

render() {
    return (
        <div className='row'>
            {
                Data.map((val, i) => {
                    return <button onClick={()=>this.show_component(val, i)}>
                        <Card
                            key={i}
                            imgsrc={val.imgsrc}
                            price={val.price}
                            title={val.title}
                        />
                    </button>
                })
            }
            {this.state.showSingleCardComp && (
            <SingleCardComp
                key={this.state.selectedItemIndex}
                imgsrc={this.state.selectedItem.imgsrc}
                price={this.state.selectedItem.price}
                title={this.state.selectedItem.title}
                seller={this.state.selectedItem.seller_desc}
                desc={this.state.selectedItem.description}
                loc={this.state.selectedItem.location}
             />
            )}
        </div>
    )
}

render（）{
返回(
{
Data.map（（val，i）=>{
返回此。显示_组件（val，i）}>
})
}
{this.state.showSingleCardComp&&(
)}
)
}

我在show_component（）的参数中收到了特定的值和索引，但它仍然没有将我重定向到SingleCardComp.jsx。是什么导致它这样做的？您不能重定向到组件。您必须在状态和标志变量中设置单击的产品数据。然后，根据标志变量，您可以使用处于状态的产品数据呈现SingleCardComp。我正在根据你的要求更新代码。对不起，兄弟打扰了，我的疑问还不清楚。我想要与本网站相同的功能，当我们点击产品（即广告）时，我们需要进入详细页面[如何制作这样的产品？对上述代码的任何指导或修改。感谢您的帮助！抱歉，这是一个在这里讨论的大主题。您需要做一些阅读。这里有一个链接让您开始。