每次值更改时如何更改字体颜色？

Question

我只想问当值改变时是否可以改变字体的颜色？ 就像交易平台的工作方式一样，它会勾选字体。 它将颜色从白色变为绿色（当值上升时）所以我想在值上升时将失败的颜色更改为红色 1 秒，我想将发送的颜色更改为绿色 1 秒价值上升。 是否可以在表格单元格中添加代码？ 谢谢你

这是表格单元格的代码

<TableCell sx={{ border:0.1,fontSize: 11.5, fontWeight: 200 }} align="center" style={{ paddingTop: 0,paddingBottom: 0,paddingLeft: 0,paddingRight:0, }}>{port.chargeCnt}</TableCell>

Answer 1

你需要：

• 跟踪前一个值（使用usePrevious挂钩）
• 每当当前值发生变化时将其与当前值进行比较，并使用它来确定将其设置为什么颜色
• 添加setTimeout函数以在一秒钟后将颜色重置为默认值
• 处理在重置发生之前值再次更改的情况（通过取消等待重置它的超时）。
• 当组件卸载时取消该超时（因此您不会尝试设置不再存在的状态）。

这样的：

import { usePrevious } from 'react-use';
import { useState, useEffect } from 'react';

const ChangingValue = ({ value }) => {
    const previous = usePrevious(value);
    const [color, setColour] = useState('black');
    const [timeoutId, setTimeoutId] = useState(0);
    useEffect(() => {
        clearTimeout(timeoutId);
        if (value > previous) {
            setColour('green');
        } else if (value < previous) {
            setColour('red');
        } else {
            setColour('black');
        }
        const newTimeoutId = setTimeout(() => {
            setColour('black');
        }, 1000);
        setTimeoutId('newTimeoutId');
        return () => clearTimeout(newTimeoutId);
    }, [value]);
    return <div style={{ color }}>{value}</div>;
};