Question

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

我想要实现的是点击查看按钮，它就像电子商务网站一样打开相应的产品详细信息页面。

我一直坚持逻辑如何绑定并重定向到相应的产品页面。

现在我正在尝试的是：

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

感谢您的帮助！

文件：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

/* 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

谢谢

Answer 1

要显示detailPage，您需要一个单独的路径/页面，然后您可以将detailPage数据传递给页面组件。

使用链接而不是按钮，它看起来与btn btn-default

类相同

 <Link to={`/Products/${ this.props.product.id }`}   className="btn btn-primary">
          View Details
  </Link>

您必须为/Products/:id ...

配置路线

Answer 2

您的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链接。导航到该路径时，将呈现第二条路线，ProductDetail可以获取并显示产品的详细信息（ID为match.params.id）。

使用ReactJS从产品列表通过JSON数据重定向到产品详细信息页面

2 个答案: