我正在显示一个从data.json文件获取数据的表。我构建了箭头函数getColor来考虑值的颜色列d、e。前10行我需要每隔3秒更改d和e列的随机数据。我希望当单元格中的值发生变化时，颜色也会根据箭头函数getColor的条件发生变化，并将在1s内高亮显示具有该变化值的单元格，两个背景对应于2种不同的颜色。我不知道如何突出显示背景已经改变值的单元格
下面是我所做的。你也可以在https://codesandbox.io/s/stupefied-perlman-qoi4wp?file=/src/App.jsApp.js文件如下所示：
import React, { useState, useEffect } from "react";
import data from './datafile/data.json';
import './styles.css'
export default function App() {
const getColor = (a, b, c, value) =>{
if(value > a && value < b){
return "green";
}else if(value > c && value < a){
return "red"
}
}
let ListData = data.list;
let get10Data = ListData.slice(0, 10)
const [list, setData] = useState(get10Data);
const randomValue = (min, max) => {
let value = Math.floor(Math.random() * (max - min + 1) + min)
return value;
}
const ChangeData = () => {
get10Data.slice().map((info) => {
if (info.a && info.b &&
info.c && info.d && info.e !== undefined) {
randomValue(info.b, info.c)
return (
setData(get10Data.slice(0, 5)),
info.d = randomValue(info.b, info.c),
info.e = randomValue(info.b, info.c)
)
}else {
return ''
}
})
}
useEffect(() => {
setInterval(ChangeData, 3000)
}, [])
const Reacords = data.list.map(info => {
return (
<tr>
<td>{info.name}</td>
<td>{info.a}</td>
<td>{info.b}</td>
<td>{info.c}</td>
<td className={getColor(info.a, info.b, info.c, info.d)}>{info.d}</td>
<td className={getColor(info.a, info.b, info.c, info.e)}>{info.e}</td>
</tr>
)
})
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
</tr>
</thead>
<tbody>
{Reacords}
</tbody>
</table>
);
}
data.json文件如下所示：
{
"a": "ok",
"list": [
{
"name": "A",
"a": 50,
"b": 90,
"c": 30,
"d": 40,
"e": 85
},
{
"name": "B",
"a": 63,
"b": 110,
"c": 40,
"d": 87,
"e": 85
},
{
"name": "C",
"a": 48,
"b": 85,
"c": 25,
"d": 30,
"e": 43
},
{
"name": "D",
"a": 45,
"b": 90,
"c": 30,
"d": 40,
"e": 85
},
{
"name": "E",
"a": 63,
"b": 110,
"c": 40,
"d": 87,
"e": 85
},
{
"name": "F",
"a": 48,
"b": 85,
"c": 25,
"d": 30,
"e": 43
},
{
"name": "G",
"a": 50,
"b": 90,
"c": 30,
"d": 40,
"e": 85
},
{
"name": "H",
"a": 63,
"b": 110,
"c": 40,
"d": 87,
"e": 85
},
{
"name": "I",
"a": 48,
"b": 85,
"c": 25,
"d": 30,
"e": 43
},
{
"name": "K",
"a": 50,
"b": 90,
"c": 30,
"d": 40,
"e": 85
},
{
"name": "L",
"a": 63,
"b": 110,
"c": 40,
"d": 87,
"e": 85
},
{
"name": "M",
"a": 48,
"b": 85,
"c": 25,
"d": 30,
"e": 43
}
]
}
希望你能帮忙。请举例说明它是如何做到的。随机值生成部分如果有人有其他方法可以告诉我。
我不会为您构建随机颜色生成器，但我将演示如何在tr上设置背景
首先调用一个可以返回样式属性的函数：
const getRowColor = (a, b, c, value) => {
if (value > a && value < b) {
return { backgroundColor:'#F22' };
} else if (value > c && value < a) {
return { backgroundColor:'#2F2' };
}
};
然后在您的表tr上添加对函数的调用：
<tr style={getRowColor(info.a,info.b,info.c,info.d)}>
只需向现有类添加额外的cssbackground-color属性：
.green {
color: green;
background-color: lightgreen;
}
.red {
color: red;
background-color: lightcoral;
}
在你的代码沙盒的这个分叉中看到它的作用