Как установить цвет фона компонента с классом карты для переменной bgColour, определенной выше?

Question

Внутри оператора if есть переменная с именем bgColour, и я хочу установить для этого цвета фона div с классом карты, но мои попытки доступа к нему не сработали. Может кто-нибудь сказать мне, как решить эту проблему? Если есть способ использовать отдельную страницу css, чтобы сделать это, это было бы еще лучше.

renderIssues2 = () => {
    let bgColours = ['Green', 'Yellow', 'Red'];
    let statusOptions = ['Available', 'Under Maintenance', 'Not Working'];
    return this.state.issues.length > 0 ?
        this.state.issues.map((issue, index) => {
            for (let i = 0; i < statusOptions.length; i++) {
                if (statusOptions[i] === issue.status) {
                    let bgColour = bgColours[i];
                }
            }
            return (
                    <div class="card" >
                        <div class="card-title">{issue.issues}</div>
                        <div class="card-body">{issue.message}</div>
                    </div>
            );
        })
        :
        null;
}

Answer 1

Вы также можете создать объект статуса для сопоставления цветов

const statusToColor = {
  'Available': 'green',
  'Under Maintenance': 'yellow',
  'Not Working': 'red',
};

renderIssues2 = () => {
  return this.state.issues.length > 0
    ? this.state.issues.map((issue, index) => {
        const bgColor = statusToColor[issue.status];
        return (
          <div class="card" style={{ backgroundColor: bgColor }}>
            <div class="card-title">{issue.issues}</div>
            <div class="card-body">{issue.message}</div>
          </div>
        );
      })
    : null;
};

Answer 2

Похоже, что вы присваиваете переменной bgColour значение цвета из массива bgColours, но вы не используете эту переменную при рендеринге карты, чтобы цвет нигде не использовался.

Добавьте bgColour как класс к вашей карте, затем в файле css, может быть, ваш основной index.css, создайте классы для каждого из ваших цветов.

<div className={"card " + bgColour}>
   <div className="card-title">{issue.issues}</div>
   <div className="card-body">{issue.message}</div>
</div>

.Green{
   background-color: green;
}
.Yellow{
   background-color: yellow;
}
.Red{
   background-color: red;
}

Кроме того, в React при назначении имен классов необходимо использовать className, а не class. Документация по стилю

Answer 3

• forL oop для определения bgColour избыточен
• bgColour равен block scoped внутри forL oop

    const { issues } = this.state;
    let bgColours = ["Green", "Yellow", "Red"];
    let statusOptions = ["Available", "Under Maintenance", "Not Working"];
    return issues.length > 0
      ? issues.map((issue, index) => {
          const colorPos = statusOptions.indexOf(issue.status);
          const bgColor = bgColours[colorPos];
          const style = bgColor ? {"backgroundColor": bgColor} : {};
          return (
            <div class="card" style={style}>
              <div class="card-title">{issue.issues}</div>
              <div class="card-body">{issue.message}</div>
            </div>
          );
        })
      : null;
  };