使用ReactJS通过JSON数据从产品列表重定向到产品详细信息页面 [英] Redirect to Product Detail Page from Product List through JSON Data with ReactJS

问题描述

我能够获得JSON数据的第一级，即对象/产品列表

I'am able to get the first level of JSON Data i.e., objects / Product List

我要实现的目标是单击查看按钮，它必须像电子商务网站一样打开相应的产品详细信息页面.

What I'am trying to achieve is on click of view button it has to open respective product detail page just like e-commerce website.

我对如何绑定并重定向到相应产品页面的逻辑感到困惑.

I have got stuck on the logic how i will bind and redirect to respective product page.

现在我正在尝试的是:

我创建了一个新文件ProductDetail.jsx并丢失了要做什么:-(

i have created a new file ProductDetail.jsx and Lost what to do :-(

感谢您的帮助！

文件:products.json

File : products.json

{
  "data": [
    {
      "id": 1,
      "title": "Jackets",
      "img": "./img/p1.jpg",
      "des": "Pure Leather Jacket",
      "rs": 9000,
      "buy": "Add to Cart",
      "details": "View Details",
      "detailPage": [
        {
          "productDetail": "Made of Pure Leather",
          "qty": 4,
          "size": "S, M, L, XL, XXL",
          "color":"white, black",
          "AddtoCart" : "Add to Cart"
        }
      ]
    }
  ]
}

文件:Products.jsx

File : Products.jsx

/* Product List Starts */
export default class Products extends React.Component {
    render() {
        return (
            <Grid>
                <Row>
                    <Col sm={12} className="text-center">
                        <h2>MEN'S STYLES</h2>
                        <p>To Make a Lasting Impression</p>
                    </Col>
                </Row>
                <ProductsC />
            </Grid>
        );
    }
}

// Products Component starts 
class ProductsC extends React.Component {
    constructor() {
        super();
        this.state = {
            data: []
        }
    }
    componentWillMount() {
        let url = "./products.json";
        Request.get(url)
            .then((res) => {
                this.setState({
                    data: res.body.data
                });
            })
            .catch(function (err) {
                alert(err);
            });
    }
    render() {
        return (

            <Row className="products-container">
                <Col sm={12}>
                    {
                        this.state.data.map(
                            (product, index) => (
                                <ProductList key={index} product={product} />
                            )
                        )
                    }
                </Col>
            </Row>
        )
    }
}
// Products Component ends 

// Products Starts
class ProductList extends React.Component {
    render() {
        const { title, img, des, rs, buy, details } = this.props.product;
        return (
            <Col xs={12} sm={3} className="text-center product-list">
                <Card>
                    <CardImg src={img} alt="product img" />
                    <Link to="/">
                        <CardTitle>{title}</CardTitle>
                    </Link>
                    <CardText>{des}</CardText>
                    <CardText>Rs : {rs} /-</CardText>
                    <Button className='btn btn-danger'>{buy}</Button> &nbsp;
                    <Button className='btn btn-primary'>{details}</Button>
                </Card>
            </Col>
        )
    }
}
// Products Ends

谢谢

推荐答案

您的Products组件可以呈现为:

<Grid>
    <Row>
        <Col sm={12} className="text-center">
            <h2>MEN'S STYLES</h2>
            <p>To Make a Lasting Impression</p>
        </Col>
    </Row>
    <Route path="/products" exact component={ ProductsC } />
    <Route path="/products/:id" component={ ProductDetail } />
</Grid>

第一个路径将呈现ProductsC组件，该组件显示列表以及每个产品的"/products" + productID链接.导航到该路径时，将显示第二条Route，并且ProductDetail可以获取并显示产品的详细信息(ID为match.params.id).

The first Route will render the ProductsC component that displays the list and a Link to "/products" + productID for each product. When navigating to that path, the second Route would be rendered, and the ProductDetail could get and show the detail of the product (the ID being match.params.id).

这篇关于使用ReactJS通过JSON数据从产品列表重定向到产品详细信息页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！