javascript - react-animarker 突出显示不随状态更改而更新

Question

我有一些文本想使用名为“react-animarker”的简单 react 包简单地突出显示。我尝试使用 useState Hook ，因为我想动态更新动画的速度，如图所示。但是，持续时间不会改变我想要的方式。但是在控制台中，它确实显示为正在更改。关于原因有什么想法吗？

React 包链接:https://github.com/ramonmetzker/react-animarker

import React, {useState} from 'react'
import {Mark} from 'react-animarker'


const Highlightx = () => {

    const [speed, setSpeed] = useState(5)

    const handleClick = () => {
        setSpeed(20)
        console.log(speed);
    }  

  return (
    <>
    <Mark duration={speed}>Highlightx</Mark>
    <button onClick={handleClick}>Hello</button>
    </>
  )
}

export default Highlightx

Answer 1

在查看了您使用的库后，我找到了解决方案:

出于某种原因，React 没有看到 <Mark> 有任何状态变化。 duration 时的组件属性更改，因此，React 不会强制刷新组件。如果您添加 key随持续时间变化的属性，那么它将强制重新渲染 Mark 组件并重新绘制高光。

例如:

<Mark key={speed} duration={speed}>

这是codesandbox中的简单示例(只需更改输入字段的值，每次更改后突出显示都会重新绘制):example