封裝react元件 顯示五星評價

兩種簡單的方式根據類似3.7和7.8這種評分顯示五星評價

封裝成react元件，使用時直接引用即可

第一種思想：設定五個元素，根據評分給不同的樣式；第二種思想：設定兩個元素，父元素給沒顏色的五角星，子元素給有顏色的五角星，根據評分設定子元素的寬度來遮擋父元素的背景圖

方法一：根據不同的評分設定不同的css樣式

三張背景圖：star0.png

，star1.png

，star2.png

1）css**：樣式可以按照自己的需求修改

.star.star>span.star0.star1.star2

import react, from 'react'class star extends component

}componentdidmount()
getstar(num))
this
.setstate()
}render())})}
}export 
default star;

頁面顯示為：

頁面顯示為：

這種方法需要少量的計算。

方法二：利用子元素的寬度將父元素進行遮擋

父元素背景圖為無色五角星，子元素背景圖為有色五角星

背景圖：

.newstar ul.newstar ul li

import react, from 'react'class star extends component

}export 
default star;

頁面顯示為：

頁面顯示為：

這種方式需要父和子元素的背景圖大小完全一樣，並且要精確計算五角星個數對應的子元素寬度

開發隨筆 React非同步載入元件封裝

react非同步載入元件封裝 作者正在開源乙個基於react typescript node.js的部落格系統，原始碼在練手開源專案，有想一起學習的或者有空的大佬可以幫我看看 提提意見，順便給個star最好不過拉。謝謝大家 1.場景敘述 今天，碰到這樣乙個問題，就是當表單過載修改的時候，需要根據介面...

react 封裝自定義元件之Button元件

學習react當然必不可少的就是自定義元件啦！看一下效果圖 首先看一下專案結構 劃去部分不需要 base資料夾 這部分模仿we ui結構 we ui原始碼 原始碼 index.js import react from react import reactdom from react dom reac...

React 封裝路由

封裝路由import movie from views movie import cinema from views cinema import mine from views mine import city from views city import search from views sea...