尝试根据当前状态有条件地渲染 react-fontawesome 图标

Posted 2023-02-22

【中文标题】尝试根据当前状态有条件地渲染 react-fontawesome 图标

【英文标题】：Trying to conditional render react-fontawesome icon based on current state

【发布时间】：2020-02-09 22:46:27

【问题描述】：

我有一个使用 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>

当“生命”状态降低时，应移除一个心形图标，向玩家表明他们失去了生命。我发现在 'hearts' 变量中显示多个图标，您必须将标签包装在父 div 标签中：

let hearts = (
    <div>
        <FontAwesomeIcon icon=faHeart className="mx-1" />
        <FontAwesomeIcon icon=faHeart className="mx-1" />
        <FontAwesomeIcon icon=faHeart className="mx-1" />
    </div>
)

我还没有找到一个干净的条件渲染解决方案，它只查看分配给“生命”的数字并更新显示的红心数量。我有一种感觉，我在这里忽略了显而易见的事情。

【参考方案1】：

您可以通过映射一个长度等于您的 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>

【参考方案2】：

或者简单的通过条件渲染

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>

【参考方案3】：

简单一点的代码，

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>
  );