Javascript 在另一个组件/反应图标中更改组件

我正在构建一个评级组件，它接收许多图标，并使用

react icons

显示它们。然而，我的问题是我想实现的一个特性。目前，我使用的react图标是

FaStarhalf

，它是一个预填充的半星，我翻转它以产生我已经创建了半星的错觉。这是非常容易使用的，并且做了我需要它做的事情，但是，我想实现一个更好的方式来显示当你选择一个星。不幸的是，

react图标

似乎无法完全填充图标

FaRegStarHalf

是

react icons

的另一个组件，它基本上是一个星形的切口，但是，您无法填充它

我的问题是。在我的

FaStarHalf

组件中，当它被单击时，是否可以将每个

FaStarHalf

从

react图标更改为它的填充副本？我可以将一个组件从内部更改为另一个组件吗

Rater

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

import './styles/Rater.css'

const Rater = ({ iconCount }) => {
    const [rating, setRating] = useState(null)
    const [hover, setHover] = useState(null)
    return (
        <div>
            {[...Array(iconCount), ...Array(iconCount)].map((icon, i) => {
                const value = (i + 1) / 2

                return (
                    <label>
                        <input
                            type='radio'
                            name='rating'
                            value={value}
                            onClick={() => {
                                console.log(`value => `, value)
                                return setRating(value)
                            }}
                        />
                        <div className='star-container'>
                            <div>
                                <FaStarHalf
                                    className={i % 2 ? 'star-left' : 'star'}
                                    color={value <= (hover || rating) ? '#ffc107' : '#e4e5e9'}
                                    onMouseEnter={() => setHover(value)}
                                    onMouseLeave={() => setHover(null)}
                                />
                            </div>
                        </div>
                    </label>
                )
            })}
        </div>
    )
}

export default Rater


如果没有看到您正在处理的数据看起来像什么，这很难回答，但我会试一试。我假设你想要的是，当用户点击一个星号将评级设置在1到5之间时，你想要以填充星号的形式向他们显示他们的评级。如果是这种情况，您可以使用
rating
确定是向用户显示当前评级还是他们设置的评级，然后根据需要使用适当的图标

这可以通过为变量设置适当的字符串，然后使用该字符串代替图标JSX标记名来实现。基本上，如果用户设置了评级，
rating
将不再是
null
，您可以断言您需要填充的星星。使用该逻辑将变量分配给所需的字符串<代码>常数星=额定值？“FaStar'：'FaHalfStar'

import React, { useState } from 'react'
import { FaStarHalf, FaStar } 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 ? 'FaStar' : 'FaHalfStar'

return (
    <div>
        {[...Array(iconCount), ...Array(iconCount)].map((icon, i) => {
            const value = (i + 1) / 2              
            
            return (
                <label>
                    <input
                        type='radio'
                        name='rating'
                        value={value}
                        onClick={() => {
                            console.log(`value => `, value)
                            return setRating(value)
                        }}
                    />
                    <div className='star-container'>
                        <div>
                            // Use 'Star' variable here which is assigned 'FaStar' or 'FaHalfStar' and will display a half star or a full star
                            <Star
                                className={i % 2 ? 'star-left' : 'star'}
                                color={value <= (hover || rating) ? '#ffc107' : '#e4e5e9'}
                                onMouseEnter={() => setHover(value)}
                                onMouseLeave={() => setHover(null)}
                            />
                        </div>
                    </div>
                </label>
            )
        })}
    </div>
)
}

export default Rater
FaHalfStar

import React，{useState}来自“React”
从'react icons/fa'导入{FaStarHalf，FaStar}
导入“./styles/Rater.css”
常数率=（{iconCount}）=>{
常数[rating，setRating]=useState（null）
const[hover，setHover]=useState（null）
//通过单击星号检查用户是否设置了分级，并使用分级确定图标
常数星=评级？'FaStar'：'FaHalfStar'
返回(
{[…数组（iconCount），…数组（iconCount）].map（（图标，i）=>{
常量值=（i+1）/2
返回(
{
log（`value=>`，value）
返回设定值（值）
}}
/>
//在此处使用指定为“FaStar”或“FaHalfStar”的“Star”变量，该变量将显示半星或全星
setHover（null）}
/>
)
})}
)
}
出口违约率
法哈尔夫星

我能够找到答案，使用与@CaseyC使用的代码类似的代码，我需要找到相应的半星，而不是我试图使用的全星

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 : FaRegStarHalf

    return (
        <div>
            {[...Array(iconCount), ...Array(iconCount)].map((icon, i) => {
                const value = (i + 1) / 2

                return (
                    <label>
                        <input
                            type='radio'
                            name='rating'
                            value={value}
                            onClick={() => {
                                console.log(`value => `, value)
                                return setRating(value)
                            }}
                        />
                        <div className='star-container'>
                            <div>
                                <Star
                                    className={i % 2 ? 'star-left' : 'star'}
                                    color={value <= (hover || rating) ? '#ffc107' : '#e4e5e9'}
                                    onMouseEnter={() => setHover(value)}
                                    onMouseLeave={() => setHover(null)}
                                />
                            </div>
                        </div>
                    </label>
                )
            })}
        </div>
    )
}

export default Rater

import React，{useState}来自“React”
从'react icons/fa'导入{FaRegStarHalf，FaStarHalf}
导入“./styles/Rater.css”
常数率=（{iconCount}）=>{
常数[rating，setRating]=useState（null）
const[hover，setHover]=useState（null）
//通过单击星号检查用户是否设置了分级，并使用分级确定图标
常数星=额定值？快速半小时：票价半小时
返回(
{[…数组（iconCount），…数组（iconCount）].map（（图标，i）=>{
常量值=（i+1）/2
返回(
{
log（`value=>`，value）
返回设定值（值）
}}
/>
setHover（null）}
/>
)
})}
)
}
出口违约率

弄清楚你想要的是什么有点让人困惑，但为什么不根据需要使用react图标中的填充星号呢<代码>FaStar。因此，如果评级为3.5星，则显示3个

FaStar

图标和一个

FaHalfStar

图标。也许我误解了你的问题？查看

…Array（iconCount）

中的数据可能会有所帮助。这与我想要的答案类似。我想要的是，当你第一次浏览它们时，你会看到第二张图片，但是当你点击并做出选择时，它们会像第一张图片一样被填满。我运行了您的代码，但是字符串值不起作用，但是当我将它们更改为literal FaStar时，它运行了，但是我的代码和您的代码之间没有任何更改。但是，我认为您正处于我所寻找的正确轨道上，这有助于我了解alotI能够绕过代码并找到解决方案很高兴您找到了解决方案。我拼凑了一支快速代码笔，显示您可以根据状态更改标记类型

import React, { useState } from 'react'
import { FaStarHalf, FaStar } 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 ? 'FaStar' : 'FaHalfStar'

return (
    <div>
        {[...Array(iconCount), ...Array(iconCount)].map((icon, i) => {
            const value = (i + 1) / 2              
            
            return (
                <label>
                    <input
                        type='radio'
                        name='rating'
                        value={value}
                        onClick={() => {
                            console.log(`value => `, value)
                            return setRating(value)
                        }}
                    />
                    <div className='star-container'>
                        <div>
                            // Use 'Star' variable here which is assigned 'FaStar' or 'FaHalfStar' and will display a half star or a full star
                            <Star
                                className={i % 2 ? 'star-left' : 'star'}
                                color={value <= (hover || rating) ? '#ffc107' : '#e4e5e9'}
                                onMouseEnter={() => setHover(value)}
                                onMouseLeave={() => setHover(null)}
                            />
                        </div>
                    </div>
                </label>
            )
        })}
    </div>
)
}

export default Rater
FaHalfStar

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 : FaRegStarHalf

    return (
        <div>
            {[...Array(iconCount), ...Array(iconCount)].map((icon, i) => {
                const value = (i + 1) / 2

                return (
                    <label>
                        <input
                            type='radio'
                            name='rating'
                            value={value}
                            onClick={() => {
                                console.log(`value => `, value)
                                return setRating(value)
                            }}
                        />
                        <div className='star-container'>
                            <div>
                                <Star
                                    className={i % 2 ? 'star-left' : 'star'}
                                    color={value <= (hover || rating) ? '#ffc107' : '#e4e5e9'}
                                    onMouseEnter={() => setHover(value)}
                                    onMouseLeave={() => setHover(null)}
                                />
                            </div>
                        </div>
                    </label>
                )
            })}
        </div>
    )
}

export default Rater