Попытка условного рендеринга иконки «Реагирующая на удивление» на основе текущего состояния

Question

У меня есть браузерная игра, которую я создаю с помощью React. У пользователя будут жизни, которые уменьшатся, когда произойдет данное событие. Живые изображения отображаются на плеере с помощью трех потрясающих шрифтов значков сердца. Я использую response-fontawesome.

Получение значков для отображения не является проблемой. Я ищу более понятный способ отображения трех значков сердца, основанных на выключенном состоянии (стараясь не использовать вложенные операторы 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>
)

Я не нашел чистого решения условного рендеринга, которое просто смотрит на числоэто назначается на «жизни» и обновляет количество отображаемых сердец. У меня такое чувство, что я упускаю из виду очевидное.

Answer 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>

Answer 2

Код немного проще,

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

Answer 3

Или просто условным рендерингом

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>