小编415*_*156的帖子

我目前有一个评级系统，可以产生 5 颗星，可以显示一半的值。我通过使用 FontAwesome 的 Half Stars 做到了这一点，并做了一些 CSS 技巧使它们看起来像一颗星。但是我想通过想出一种方法来只显示 SVG 图标的一半来增加我的 React 和 CSS 知识。因此，我可以使用用户想要的任何图标，而不是使用半星，例如，如果您想给出 3.5 的评分，它只会显示图标的 50%。

问：你能不能只显示一个图标的一半，然后以某种方式知道用户是点击一侧还是另一侧？

这是我目前使用半星的代码作为参考

import React, { useState } from 'react'
import { FaRegStarHalf, FaStarHalf } from 'react-icons/fa'

import './styles/Rater.css'

const Rater = ({ iconCount }) => {
    const [rating, setRating] = useState(null)
    const [hover, setHover] = useState(null)
    // check if user has set a rating by clicking a star and use rating to determine icons
    const Star = rating ? FaStarHalf : …

我构建了一个组件，它基本上是一个评级系统，允许您根据下拉列表添加更多图标。

我想知道是否有办法制作半星，我在互联网上查看了旧代码，但没有任何更新。任何帮助表示赞赏

import React, { useState } from 'react'
import {FaStar} from "react-icons/all";
import './Rater.css'


const Rater = () => {
    const [rating, setRating] = useState(null)
    const [hover, setHover] = useState(null)
    const [value] = useState(100)
    const [iconValue, setIconValue] = useState(5)


    return (
        <div>
            <select onChange={(e) =>
            {setIconValue(Number(e.target.value))}}>
                { Array.from(new Array(value),(value, index) =>
                    index + 1).map(value => <option
                    key={value} value={value}>{value}</option>) }
            </select>
            <h1> Select Amount of Icons </h1>


            {[... Array(iconValue)].map((icon, i) => {
                const value = i + 1

                return ( …

我已经尝试将我的 React App 项目添加到 Github Pages 一周了。在完成所有准备工作和所有需要完成的事情之后，我终于让它出现了，好吧。它实际上没有显示任何内容，也没有给我错误。这让我相信我的剧本

<script src="../dist/bundle.js"></script>

是罪魁祸首。然而，问题是我从来没有使用过bundle.js。我想学习如何在不使用 create-react-app 的情况下使用 React，在这样做的过程中，我似乎已经在游戏中走得很远了，我什至不确定这应该如何工作。

这是当前形式的 Github 页面

https://kevin6767.github.io/redux-api-opendota2/

编辑：它现在似乎显示 404。我什至不确定为什么这在此时不起作用。我尝试过很多不同的方法。