ReactJS - 产品详情案例

目前为止学到了css，所以就想整合一下所学的东西。主要还是用引用css文件和行内装饰写，怎么方便怎么来嘛……

做好的展示如下：

目录结构为下：

|-node_modules
|-public
|-src
|   |-css
|   |   |-rater.css
|   |-images
|   |   |-laptop.png
|   |-index.js
|   |-Product.jsx
|   |-Rater.jsx

这就是需要的所有的文件和代码了。

简介和图片从HP的官网拉下来的——hp-omen—1，感觉蛮好看的就……

Product.jsx文件中的代码如下：

import React from 'react';
import laptop from './Images/laptop.png'
import Rater from './Rater.jsx';

class Product extends React.Component{
    render(){
        return(
            <div style={{textAlign: "center"}}>
                <div className="product">
                    <img src={laptop} className="img" alt="laptop" style={{width:'300px', height:'auto'}}/>
                    <div className="caption">
                        <a href='/productDetails'><h3>OMEN Laptop - 15t</h3></a>
                        <h4><span style={{color:"red"}}>$799.99</span></h4>
                        <p>With the OMEN by HP 15 Laptop, you can play at your best from anywhere - without sacrificing performance.</p>
                        <Rater />
                        <span style={{fontSize:"9px"}}>4.1/5</span>
                    </div>
                </div>
            </div>
        )
    }
}

export default Product;

a href='/productDetails'这一段目前还没做；<Rater />是评价中的几颗星，具体代码如下：

import React from 'react';
import './css/rater.css';

class Rater extends React.Component{
    render(){
        return(
            <ul className="rating">
                <li className="filled">{'\u2605'}</li>
                <li className="filled">{'\u2605'}</li>
                <li className="filled">{'\u2605'}</li>
                <li className="filled">{'\u2605'}</li>
                <li>{'\u2605'}</li>
            </ul>
        )
    }
}
export default Rater;

以及其对应的css文件：

.rating {
    list-style: none;
    display: flex;
    justify-content: center 
}

.filled {
    color: yellow;
}

如果没有css文件对其进行装饰的话，是会显示出一排竖着的黑色五角星：

·★

这样重复五次。

其中list-style: none;去除了·；display: flex;将所有ul中的li放在了一行展示；justify-content: center使整个ol居中。

color: yellow;起到替换颜色的作用。