尝试根据当前状态有条件地渲染react-fontawesome图标
尝试根据当前状态有条件地渲染react-fontawesome图标
提问于 2019-10-13 03:18:55
我有一个基于浏览器的游戏，我正在创建与反应。当给定事件发生时，用户的寿命将会减少。生活是通过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>当“生命”状态下降时，一个心形图标应该被移除，以向玩家表明他们失去了生命。我发现要在'hearts‘变量中显示多个图标，您必须将标签包装在父div标签中：
let hearts = (
<div>
<FontAwesomeIcon icon={faHeart} className="mx-1" />
<FontAwesomeIcon icon={faHeart} className="mx-1" />
<FontAwesomeIcon icon={faHeart} className="mx-1" />
</div>
)我还没有找到一个干净的条件渲染解决方案，它只查看分配给'lives‘的数字，并更新显示的心数。我有一种感觉，我在这里忽略了显而易见的事情。
回答 3
Stack Overflow用户
发布于 2019-10-13 03:38:02
您可以通过映射一个长度等于您的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>Stack Overflow用户
发布于 2019-10-13 03:45:10
或简单地通过条件呈现
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>Stack Overflow用户
发布于 2019-10-13 03:45:24
更简单的代码，
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>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58357643
复制相关文章
相似问题
腾讯云开发者
