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

Question

感谢您的帮助！

我想要实现的是，点击卡片列表组件时，它必须像电子商务网站一样打开相应的产品详细信息页面。 我已经创建了：

CardList 组件，卡片组件，数据（其中包含数组 object）和singleCardComponent（即描述页面组件） 我认为我在 cardList 组件中犯了一个错误。

我陷入了如何重定向到相应产品页面的逻辑上。

    //--------------------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>
        )
    }
}

Here is the image of card

Answer 1

show_component 方法似乎是这里的问题，

show_component 方法中的Data 是什么意思？这与CardList->render 方法中使用的数组相同吗？如果是这种情况，您需要做的是像这样更新您的 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}
        />
        }
    })

}

这是变化最小的解决方案。但是，更好的解决方案是在 show_component 方法中将卡片数据作为参数传递。像这样，

state = {
    selectedItem: null,
    showSingleCardComp: false,
    selectedItemIndex: 0,
}

show_component = (v, i) => {
    this.setState({selectedItem: v, showSingleCardComp: true, selectedItemIndex: i});
}

并像这样调用 show_component 方法，

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>
    )
}