ReactJS - 产品详情案例

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

做好的展示如下:

目录结构为下:

1
2
3
4
5
6
7
8
9
10
|-node_modules
|-public
|-src
| |-css
| | |-rater.css
| |-images
| | |-laptop.png
| |-index.js
| |-Product.jsx
| |-Rater.jsx

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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 />是评价中的几颗星,具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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文件:

1
2
3
4
5
6
7
8
9
.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;起到替换颜色的作用。

-------The end of this article  Thank you for your reading-------
0%