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

没有看到您正在使用的数据看起来很难回答，但我会尝试一下。我假设您想要的是当用户单击星星以将评分设置为1到5之间时，您想要以实心星星的形式向他们显示其评分。如果是这种情况，您可以rating用来确定是向用户显示当前等级还是他们所设置的等级，然后根据需要使用适当的图标。

可以通过将适当的字符串设置为变量，然后使用该字符串代替图标JSX标记名称来实现。基本上，如果用户设置了评分，rating它将不再是null，您可以断言您需要填充星。使用该逻辑将变量分配给所需的字符串。const Star = rating ? '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