在另一个 Component/react-icons 中更改一个组件
Changing a Component inside another Component/react-icons
我正在构建一个评级组件,它接收许多图标并使用 react-icons
显示它们。但是,我的问题是关于我想实现的功能。目前,我正在使用的反应图标是 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
如果没有看到您正在处理的数据,这很难回答,但我会试一试。我假设您想要的是当用户单击一颗星以将评级设置在 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
我能够弄清楚,使用与@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
我正在构建一个评级组件,它接收许多图标并使用 react-icons
显示它们。但是,我的问题是关于我想实现的功能。目前,我正在使用的反应图标是 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
如果没有看到您正在处理的数据,这很难回答,但我会试一试。我假设您想要的是当用户单击一颗星以将评级设置在 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
我能够弄清楚,使用与@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