Блог

У меня есть массив объектов, выводимых из API, как показано ниже:

 var x = [{
    name: "test",
    group: [{
      name: "rating",
      value: "55"
    }]
  },
  {
    name: "test1",
    group: [{
      name: "rating",
      value: "20"
    }]
  },
  {
    name: "test2",
    group: [{
      name: "rating",
      value: "60"
    }]
  },
  {
    name: "test3",
    group: [{
      name: "rating",
      value: "10"
    }]
  }
] 

 <table>
  <tr>
    <td>test</td>
    <td>test1</td>
    <td>test2</td>
    <td>test3</td>
  </tr>
</table> 

Я пытаюсь изменить цвет всех строк таблицы на зеленый в зависимости от значения объекта x.group[0].value , превышающего 30. Есть идеи, как я могу этого добиться? Я пытаюсь сгруппировать массивы со значениями, превышающими 30, но я не уверен, как я могу изменить цвет на основе этого.

 for (var i = 0; i < x.length; i  ) {
  x[i].group[0].value
} 

Примечание: Я использую ReactJS. Я создал компонент таблицы, подобный этому. Я не уверен, что смогу сильно изменить HTML

Вы можете использовать условие, чтобы определить, больше или нет x.group[0].value 30

 <table>
    <tr style={{backgroundColor: !!(x.group[0].value > 30) ? 'green': 'red'}}>test</tr>
    <tr style={{backgroundColor: !!(x.group[0].value > 30) ? 'green': 'red'}}>test1</tr>
    <tr style={{backgroundColor: !!(x.group[0].value > 30) ? 'green': 'red'}}>test2</tr>
    <tr style={{backgroundColor: !!(x.group[0].value > 30) ? 'green': 'red'}}>test3</tr>
</table>
 

Добавление этой строки style={{ backgroundColor: !!true ? "green" : "red" }} в строку 101 внутри тега в примере кода делает строки таблицы зелеными. Измените условие, чтобы использовать ваше значение, и оно будет зеленым/вашим цветом в зависимости от условия

Вы можете использовать clsx библиотеку, с помощью которой вы можете предоставить несколько className s условно.

 <tr
  className={clsx({
    defaultClass: true,
    tableGreen: x.group[0].value > 30,
    // other conditional classes
  })}
>
  ...
</tr>
 

В вашем styles.css

 .defaultClass {
  padding: 5px;
}

.tableGreen {
  backgroundColor: #00ff00;
}

 

Чтобы он работал с react-table вами, вам придется изменить структуру массива

 function transform(y) {
  return y.map((i) => ({
    name: i.name,
    ...i.group.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.value }), {}),
  }));
}
 

Это даст вам такой результат

 [
    {
        "name": "test",
        "rating": "55"
    },
    {
        "name": "test1",
        "rating": "20"
    },
    {
        "name": "test2",
        "rating": "60"
    },
    {
        "name": "test3",
        "rating": "10"
    }
]
 

При сравнении обязательно преобразуйте rating в number тип с помощью parseInt . В конечном итоге в Table компоненте, как в приведенном вами примере.

 <tbody {...getTableBodyProps()}>
  {page.map((row, i) => {
    prepareRow(row);
    return (
      <tr
        {...row.getRowProps()}
        className={clsx({
          defaultClass: true,
          tableGreen: parseInt(row.original.rating) > 30,
          // other conditional classes
        })}
      >
        {row.cells.map((cell) => {
          return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
        })}
      </tr>
    );
  })}
</tbody>