我有一個具有 className 的跨度。span有兩種狀態，一種是like
<span key={uuid()} ref = {colorRef} className = 'singleWord'>{word}</span>
另一個就像
<span key={uuid()} ref = {colorRef} className = 'singleWord redword'>{word}</span>
現在我想要檢查 className 值，例如我們在 vanilla js 中執行的 className.classList.contain("oneClass') 但我需要在 react hook（可能與 ref hook）中，還添加 className 并洗掉 className 。也是可以檢查 className 的長度。例如'singleword redword'應該給出長度2。所以總的來說我需要 -
- 添加或洗掉類
- 檢查長度
- 檢查類是否包含我需要在反應鉤子中檢查它們有人可以建議怎么做嗎？提前致謝
uj5u.com熱心網友回復：
您可以在狀態中存盤一個類陣列并使用它來獲取您需要的所有資訊，此外它還提供了一種簡單的方法來切換一組類中的任何類。
基本上這個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>
)
};
uj5u.com熱心網友回復：
如果您使用的是鉤子，那么您可以通過呼叫并繼續執行 vanilla js 方法等
colorRef = useRef()來獲取目標節點。colorRef.currentcolorRef.current.classList.contain("oneClass')
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/433641.html
標籤：javascript 反应 dom 反应钩子