我有一些文字,我想简单地突出使用一个简单的react 包称为'react Animmarker'.我试图使用useState钩子,因为我想动态更新动画的速度,如图所示.然而,持续时间并没有改变我想要的方式.但在控制台中,它确实显示为变化.你知道为什么吗?

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

推荐答案

在查看了您正在使用的库之后,我找到了一个解决方案:

由于某些原因,当duration属性更改时,React看不到<Mark>组件的任何状态更改,因此,React不会强制刷新组件.如果添加随持续时间变化的key属性,则它将强制重新渲染标记组件并重新绘制高光.

前任:

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

下面是codesandbox中的简单示例(只需更改输入字段的值,每次更改后高亮显示将重新绘制):example

Javascript相关问答推荐

导入图像与内联包含它们NextJS

使用json文件字符串来enum显示类型字符串无法按照计算的enum成员值的要求分配给类型号

有什么(最佳)方法可以从模块中获取脚本模块的多姆元素吗?

Cookie中未保存会话数据

如何用显示网格平滑地将元素从一个地方移动到另一个地方?

如何从一个列表中创建一个2列的表?

Promise Chain中的第二个useState不更新

我在我的Java代码中遇到了问题,代码的一部分看不到先前定义的对象

我怎么才能得到Kotlin的密文?

Angular 订阅部分相互依赖并返回数组多个异步Http调用

未加载css colored颜色 ,无法将div设置为可见和不可见

JavaScript不重定向配置的PATH

为什么可选参数的顺序会导致问题?

未捕获的运行时错误:调度程序为空

如何在一个对象Java脚本中获取不同键的重复值?

Phaser3 preFX addGlow不支持zoom

FileReader()不能处理Firefox和GiB文件

按特定顺序将4个数组组合在一起,按ID分组

在单击按钮时生成多个表单时的处理状态

ComponentWillReceiveProps仍在React 18.2.0中工作