小编Pet*_*teG的帖子

我正在寻找一种很好的速记法，将相同的效果应用于顺风中的多个伪类。

例如，我可能想将蓝色背景应用于 div 上的 :hover 和 :focus 状态。

目前我必须写以下内容：

<div className="hover:bg-blue focus:bg-blue>Text<div>

或者，我可以使用 apply 构建一个自定义类，如下所示：

.hover-focus-bg-blue {
  @apply hover:bg-blue focus:bg-blue
}

但是，当我必须应用复杂的状态时（在我当前的项目中，我需要覆盖一个元素上的 11 个状态（休息/悬停/活动/焦点/焦点可见/焦点可见 && 悬停等），这些都不是很好的选择。

apply 方法仅在多次使用时才保存代码。

我想看到的是这样的：

<div className="[hover, focus]:bg-blue">Text</div>

有谁知道类似的语法吗？到处都找不到。

如下面的代码所示，我使用 useEffect 挂钩来监视百分比变量的更改，然后设置一个计时器以在 1 秒内递增该变量。页面加载后回调就会发生，从而启动该过程。

百分比变量用于呈现折线图，该折线图会递增直至达到传递的值。（它基本上显示了通过率百分比，但在加载时，条形图将在屏幕上移动至其百分比。）

一切正常，但控制台标记了最大更新深度警告，指出当我在 useEffect 中使用 setState 时，它​​试图防止无限循环。我明白了这里的意思，但我知道我永远不会传递超过 100 的值，因此永远不会出现无限循环。我还需要递归功能来让我的图表看起来动态填充。

即使我决定忽略该警告，如果我安装该组件，它也会在我的测试中产生错误。

有没有一种方法可以告诉 React 这不会是一个无限循环并让错误消失？或者我需要不同的方法吗？

const ReportProgressSummary = ({result, title}) => {
    const [percent, setPercent] = useState(0);
    let timer = null;

    useEffect( () => {
        let newPercent = percent + 1;
        if (newPercent > result) {
            clearTimeout(timer);
            return;
        }
        timer = setTimeout(setPercent(newPercent), 1000);
    }, [percent]);

    return (

        <ContainerStyled>
            <ChartContainerStyled>
                <ChartTitleStyled>{title}</ChartTitleStyled>
                <CheckboxStyled type="checkbox" />
            </ChartContainerStyled>
            <ChartContainerStyled>
                <LineContainerStyled>
                    <Line trailWidth="2" trailColor="red" strokeWidth="4" strokeColor="green" percent={percent}/>
                </LineContainerStyled>
                <h6>{percent}%</h6>
            </ChartContainerStyled>
        </ContainerStyled>
    )
}; …