как закрасить строку в react по значению?

Question

У меня есть строки в react мне нужно закрасить строку в зависимости от значения: в зелёный если больше 50, если меньше красным, если больше 100 то в синий. как реализовать это в react?

getColorRow = (value)=>{
        if(value> 100) return "blue"
        if(value> 50) return "green"
        if(value< 50) return "red"
     }
<link rel="stylesheet" href="index.css"></link>

Вот сама таблица

 <table className="table table-striped">
<thead>
<tr>
    <th>
        byte7
    </th>
    <th>   
    byte6
    </th>
    <th>   
    byte5
    </th>
    <th>   
    byte4
    </th>
    <th>   
    byte3
    </th>
    <th>   
    byte2
    </th>
    <th>   
    byte1
    </th>
    <th>   
    byte0
    </th>
    <th>   
    number
    </th>
    <th>
    Options
    </th>
    <th>
        Choose
    </th>
</tr>
</thead>
<tbody>
    {bytes.map(byt=>
        <tr key={byt.id}>
            <td>{byt.byte7}</td>
            <td>{byt.byte6}</td>
            <td>{byt.byte5}</td>
            <td>{byt.byte4}</td>
            <td>{byt.byte3}</td>
            <td>{byt.byte2}</td>
            <td>{byt.byte1}</td>
            <td  >{byt.byte0}</td>
            <td>{byt.number}</td>
           
            <td>
            <button type="button"
            className="btn btn-light mr-1"
            data-bs-toggle="modal"
            data-bs-target="#exampleModal"
            onClick={()=>this.editClick(byt)}>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-pencil-square" viewBox="0 0 16 16">
                <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
                <path fillRule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
                </svg>
            </button>

            <button type="button"
            className="btn btn-light mr-1"
            onClick={()=>this.deleteClick(byt.id)}>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-trash-fill" viewBox="0 0 16 16">
                <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
                </svg>
            </button>

            </td>
            <td>
                <input type="radio" onClick={()=>this.checkClick(byt.id)} ></input>
            </td>
        </tr>
        )}
</tbody>
</table>

Также я подключил bootstrap но он красит строки по очерёдности в белый либо в серый

Answer 1

Есть много вариантов, по сути тебе нужно давать класс элементу в зависимости от значения, можно сделать функцию которая принимает значение и возвращает строку которая является именем класса

как пример описывающий принцип

getColorRow = (value)=>{
   if(value> 100) return 'blue'
   if(value> 50) return 'green'
   if(value< 50) return 'red'
}

<tr className={this.getColorRow(byt.value)} key={byt.id}> //подставь в функцию свое значение

Так же при помощи пакета Classnames можно сделать подобную конструкцию

const rowClass = classNames({
      blue: value> 100,
      green: value> 50,
      red: value< 50
    });
<tr className={rowClass } key={byt.id}>

нужно в таблицу стилей добавить 3 правила для каждого цвета

.red{
   background-color: red;
}
.blue{
   background-color: blue;
}
.green{
   background-color: green;
}

БЛОГ НА HUSL

как закрасить строку в react по значению?

Ответы (1 шт):