我有一个用React创建的基于浏览器的游戏。当给定事件发生时,用户的寿命将会减少。通过3个字体真棒的心脏图标向玩家显示实况。我正在使用react-fontawesome。
获取要显示的图标不是问题。我正在寻找一种更清洁的方式来显示基于关闭状态的3个心脏图标(尝试尽可能不使用嵌套的if语句或switch语句)。
// initial state
state = { lives: 3 }
// import of FA icon with react-fontawesome
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart } from '@fortawesome/free-solid-svg-icons'
// assigning icon to variable
let hearts = <FontAwesomeIcon icon={faHeart} className="mx-1" />;
// displaying icon
<div className="d-flex panel-content-md">{ hearts }</div>
当“生存”状态降低时,应删除心脏图标,以向玩家表明他们已经丧命。我发现在“心脏”变量中显示了多个图标,您必须将标签包装在父div标签中:
let hearts = (
<div>
<FontAwesomeIcon icon={faHeart} className="mx-1" />
<FontAwesomeIcon icon={faHeart} className="mx-1" />
<FontAwesomeIcon icon={faHeart} className="mx-1" />
</div>
)
我还没有找到一种干净的条件渲染解决方案,该解决方案仅查看分配给“生命”的数字并更新显示的心形数量。我有一种感觉,我正在忽略这里明显的东西。
答案 0 :(得分:3)
您可以通过映射长度等于state.lives值的长度的数组来实现此目的:
<div>
{
[...Array(this.state.lives).keys()].map(i => (
<FontAwesomeIcon key={i} icon={faHeart} className="mx-1" />
)
}
</div>
或者只是将您的生活存储为数组或每个生活中一个字符的字符串
// this.state.livesArray is [1,2,3]
<div>
{
this.state.livesArray.map(i => (
<FontAwesomeIcon key={i} icon={faHeart} className="mx-1" />
)
}
</div>
// this.state.livesString is "❤❤❤"
<div>
{
this.state.livesString.split('').map(i => (
<FontAwesomeIcon key={i} icon={faHeart} className="mx-1" />
)
}
</div>
答案 1 :(得分:0)
或者只是通过条件渲染
let heart = <FontAwesomeIcon icon={faHeart} className="mx-1" />;
<div className="d-flex panel-content-md">
{this.state.lives >= 1 && heart }
{this.state.lives >= 2 && heart }
{this.state.lives >= 3 && heart } // or === 3 if you don't want to add extra lives in the future
</div>
答案 2 :(得分:0)
简单一些的代码
render() {
let hearts = [];
for(let i=0; i<this.state.lives; i++) {
hearts.push(<FontAwesomeIcon key={i} icon={faHeart} className="mx-1" />)
}
return(
<div>{hearts}</div>
);
}