ReactJS:具有可变随机值的HighLight背景

Question

我正在显示一个从data.json文件获取数据的表。我构建了箭头函数getColor来考虑值的颜色​​列d、e。前10行我需要每3s更改一次d列和e列的随机数据。
我希望当单元格中的值发生变化时，颜色也会根据箭头函数getColor的条件发生变化，并将在1s内用对应于2种不同颜色的两个背景突出显示具有该变化值的单元格
我不知道如何突出显示背景中已更改值的单元格

下面是我所做的。你也可以在https://codesandbox.io/s/stupefied-perlman-qoi4wp?file=/src/App.js

App.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
}
]
}

希望你能帮忙。请举例说明它是如何做到的。随机值生成部分如果有人有其他方法可以告诉我。

Answer 1

我使用keyframes在2秒内实现动画背景颜色的变化(第一秒变绿/变红，第二秒变回白色背景(

.App {
font-family: sans-serif;
text-align: center;
}
table {
border: 1px solid #333333;
border-collapse: collapse;
width: 90%;
}
th,
td {
border: 1px solid #333333;
border-collapse: collapse;
text-align: center;
}
@keyframes green-background-fade {
50% {
background: rgba(0, 128, 0, 0.3);
}
100% {
background: #fff;
}
}
@keyframes red-background-fade {
50% {
background: rgba(128, 0, 0, 0.3);
}
100% {
background: #fff;
}
}
.background-green {
animation: green-background-fade 2s forwards;
}
.background-red {
animation: red-background-fade 2s forwards;
}
.green {
color: green;
}
.red {
color: red;
}

你还需要有useEffect和setTimeout来重置动画

import React, { useState, useEffect, useCallback } from "react";
import data from "./datafile/data.json";
import "./styles.css";
const Row = ({ info, mainInfo }) => {
const [backgroundColor, setBackgroundColor] = useState("");
const [textColor, setTextColor] = useState("");
useEffect(() => {
const color = getColor(info.a, info.b, info.c, mainInfo);
setBackgroundColor(`background-${color}`);
setTextColor(color);
setTimeout(() => {
setBackgroundColor("");
}, 2000);
}, [mainInfo]);
const getColor = useCallback((a, b, c, value) => {
if (value > a && value < b) {
return "green";
} else if (value > c && value < a) {
return "red";
}
}, []);
return <td className={[backgroundColor, textColor].join(" ")}>{mainInfo}</td>;
};
const Record = ({ info }) => {
return (
<tr>
<td>{info.name}</td>
<td>{info.a}</td>
<td>{info.b}</td>
<td>{info.c}</td>
<Row info={info} mainInfo={info.d} />
<Row info={info} mainInfo={info.e} />
</tr>
);
};
export default function App() {
let ListData = data.list;
let get10Data = ListData.slice(0, 10);
const [list, setData] = useState(ListData);
const randomValue = (min, max) => {
let value = Math.floor(Math.random() * (max - min + 1) + min);
// value = parseFloat(value / 1000).toFixed(2) * 1000;
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 Records = data.list.map((info, index) => (
<Record key={info.name + index} info={info} />
));
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>{Records}</tbody>
</table>
);
}

完整的代码在这个sanbox 中