更改另一个组件内的组件/react-icons

Question

我正在构建一个评级组件，它接受一些图标并使用react-icons显示它们。然而，我的问题是关于我想实现的一个功能。目前，我正在使用的react图标是FaStarhalf，它是一个预先填充的半星，我翻转它来制造我已经创建了半星的错觉。这是非常容易使用，并做我需要它做的事情，然而，我想实现一个更好的方式来显示时，您正在选择一颗星。不幸的是，react-icons似乎不具备让我完全填充图标的能力。FaRegStarHalf是react-icons的另一个组件，它基本上是一个星形的裁剪，但是，你不能填充它。

所以我要问你一个问题。在我的FaStarHalf组件中，当它被点击时，有没有可能将每个FaStarHalf更改为它在react-icons中填充的副本？我可以将一个组件从其内部更改为不同的组件吗？

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

FaHalfStar

​

​

FaRegHalfStar

​

​

Answer 1

在看不到您正在处理的数据看起来像什么的情况下，这很难回答，但我会尝试一下。我假设你想要的是，当用户点击一颗星来设置一个介于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

Answer 2

我使用类似于@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