使用react hook更新className

发布于 2025-01-10 17:10:22 字数 612 浏览 0 评论 0原文

我有一个包含 className 的跨度。 span 有两种状态，一种是 like

<span  key={uuid()} ref = {colorRef} className = 'singleWord'>{word}</span>

，另一种是 like

<span  key={uuid()} ref = {colorRef} className = 'singleWord redword'>{word}</span>

现在我想要的是检查 className 值，例如 className.classList.contain("oneClass') 我们在 vanilla js 中执行的操作，但我需要在 React hook 中（可能是与 ref hook) 并添加 className 和删除 className 也可以检查 className 的长度。例如 'singleword redword' 应该给出长度 2。所以总的来说我需要 -

添加或删除类
检查长度
检查类是否包含我需要在反应钩子中检查它们有人可以建议怎么做吗？提前致谢

原文

I have a span which has a className . The span has two state, one is like

<span  key={uuid()} ref = {colorRef} className = 'singleWord'>{word}</span>

and the other is like

<span  key={uuid()} ref = {colorRef} className = 'singleWord redword'>{word}</span>

Now what I want is to check the className value like className.classList.contain("oneClass') which we do in vanilla js but I need in react hook(may be with ref hook) and also add className and remove className . also is it possible to check the length of className .for example 'singleword redword' should give length 2.
So overall I need -

add or remove classes
check length
check if class contains or not
I need to check them in react hook
could anybody suggest how to do ??
Thanks in advance

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

摘星┃星的人 2025-01-17 17:10:23

如果您使用 colorRef = useRef() 钩子，那么您可以通过调用 colorRef.current 获取目标节点并继续使用普通的 js 方法，例如
colorRef.current.classList.contain("oneClass') 等等。

回复收藏 0 原文

画尸师 2025-01-17 17:10:22

您可以在状态中存储一个类数组，并使用它来获取您需要的所有信息，而且它提供了一种简单的方法来切换一组类中的任何类。

基本上，这个handleClasses函数接受一个类参数，然后检查该类是否已经在您的状态中。如果是，则将其删除，如果不是，则将其添加到状态中。然后在你的跨度中，将数组中的所有类加入状态以形成单个类字符串。

此外，您还可以通过执行 classes.length 轻松获得应用于元素的类的数量

import React, { useState } from 'react';

const Component = () => {
  const [classes, setClasses] = useState(['singleWord']);

  const numberOfClasses = classes.length;

  const handleClasses = (c) => {
    setClasses(classes.includes(c)
      ? classes.filter((cls) => cls !== c)
      : [...classes, c]
    )
  }

  return (
    <span
      onClick={() => handleClasses(passClassToToggleHere)}
      className={classes.join(' ')}
    >
      text
    </span>
  )
};

You can store in state an array of classes and use that to get all the information you need plus it gives an easy way to toggle any class in a set of classes.

basically this handleClasses function takes a class argument and then checks whether that class is already in your state. If it is, it removes it, if it's not, it add it to the state. Then in your span you join all the classes in the array in state to make a single string of classes.

Also you get the number of classes applied to your element very easily by doing classes.length

import React, { useState } from 'react';

const Component = () => {
  const [classes, setClasses] = useState(['singleWord']);

  const numberOfClasses = classes.length;

  const handleClasses = (c) => {
    setClasses(classes.includes(c)
      ? classes.filter((cls) => cls !== c)
      : [...classes, c]
    )
  }

  return (
    <span
      onClick={() => handleClasses(passClassToToggleHere)}
      className={classes.join(' ')}
    >
      text
    </span>
  )
};

回复收藏 0 原文

~没有更多了~