[英]Changing a Component inside another Component/react-icons
I'm building a rating component that takes in a number of icons and displays them using react-icons
.我正在构建一个评级组件,它接收许多图标并使用
react-icons
显示它们。 My question however is for a feature that I would like to implement.然而,我的问题是关于我想要实现的功能。 Currently, the react-icon that I'm using is
FaStarhalf
which is a pre-filled half star, that I flip to make the illusion that I've created half stars.目前,我使用的反应图标是
FaStarhalf
,它是一个预填充的半星,我翻转它以制造我创造了半星的错觉。 This is very easy to work with and does what I need it to do, however, I wanted to implement a better way to display when you are selecting a star.这很容易使用并且可以完成我需要它做的事情,但是,我想实现一种更好的方式来在您选择星星时进行显示。 Unfortunately,
react-icons
doesn't seem to have the ability for me to fill an icon all the way.不幸的是,
react-icons
似乎没有能力让我一直填充图标。 FaRegStarHalf
is another component from react-icons
which is basically a cut out of a star, however, you can't fill it in. FaRegStarHalf
是react-icons
的另一个组件,它基本上是一个星星的剪裁,但是,你不能填充它。
So my question to you.所以我问你的问题。 Would it be possible inside my
FaStarHalf
component, when it is clicked, to change every FaStarHalf
into it's filled counterpart from react-icons
?是否有可能在我的
FaStarHalf
组件中单击它时将每个FaStarHalf
更改为react-icons
的填充对应项? Can I change a component from inside itself to be a different component?我可以将组件从自身内部更改为不同的组件吗?
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
Without seeing what the data you're working with looks like this is difficult to answer but I'll take a shot.如果没有看到您正在使用的数据看起来像这样,这很难回答,但我会试一试。 I'm assuming that what you want is when a user clicks a star to set a rating between 1 and 5, you want to show their rating to them in the form of filled stars.
我假设您想要的是当用户单击星号将评分设置在 1 到 5 之间时,您希望以实心星的形式向他们显示他们的评分。 If that's the case you can use
rating
to determine whether the user is being shown the current rating or the rating that they've set and then use the proper icon as needed.如果是这种情况,您可以使用
rating
来确定是向用户显示当前评级还是他们设置的评级,然后根据需要使用适当的图标。
This can be accomplished by setting the proper string to a variable and then using that in place of your icons JSX tag name.这可以通过将正确的字符串设置为变量然后使用它来代替您的图标 JSX 标记名称来完成。 Basically, if the user has set a rating,
rating
will no longer be null
and you can assert that you need filled stars.基本上,如果用户设置了评分,
rating
将不再是null
并且您可以断言您需要填充星。 Use that logic to assign a variable to the string you want.使用该逻辑将变量分配给您想要的字符串。
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
I was able to figure it out, using a similar code as to what @CaseyC used, I needed to find the corresponding Halfstar that was filled in, not the full star I was trying to use我能够弄清楚,使用与@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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.