我正在渲染自定义组件app.js
return (
{cards.map((index) => {
return <Card key={index} />
)
在Card
中,我提出了具体的className
return (
<ListItem id="root" className="find-card"> ...
由于<ListItem/>
本身是material-ui
的一部分,所以它把className
转化为
<li class="MuiListItem-root find-card MuiListItem-gutters" id="root">
那么如何使用querySelectorAll()
以便它可以找到className
中包含特定字符串的所有项目?
我已经尝试使用与本指南相同的方法document.querySelectorAll('li[find-card]')
但没有找到。
编辑1:
我遵循了您的建议,浏览器控制台document.querySelectorAll(".find-card")
记录了我的所有项目。
我正在尝试实现lazy load
这是hook
const imagesRef = useRef(null)
useEffect(
() => {
imagesRef.current = document.querySelectorAll(".find-card")
console.log(document.querySelectorAll(".find-card"))
},
[imagesRef, cardData.cards]
)
开始时,卡的数量是0
,但在滚动数量发生变化时,该钩子会触发,但会记录NodeList []
。我还有另一个钩子,可以记录在那lazy load
之前加载的数据量。换句话说,当加载项目时,该内容仍显示0
,但浏览器控制台显示正确的数量。基本上问题必须在钩子上
编辑2:
我已经更新了上面的useEffect
useEffect(
() => {
imagesRef.current = document.querySelectorAll(".find-card")
console.log(cardData.cards)
console.log(document.querySelectorAll(".find-card"))
...
这就是我在日志中的内容。起初数组是空的,然后它被填满了,但钩子找不到任何东西。
[]
NodeList []
(5) [Array(4), Array(4), Array(4), Array(4), Array(4)]
NodeList []
溶液:
回顾评论部分
setTimeout()
是必需的,document.querySelectorAll(".find-card")
运作良好。
useEffect(
() => {
setTimeout(() => {
imagesRef.current = document.querySelectorAll(".find-card")
console.log(cardData.players)
}, 10)
},
[cardData.cards]
)
querySelectorAll
不知道您正在寻找类名。你必须把它表示为.find-card
所以querySelectorAll知道要查找该类。这应该是抓取所有具有该类名的元素,不应该比我认为的更复杂。
document.querySelectorAll('.find-card')
若要使用"find-card"类获取元素,请使用以下代码:
document.querySelectorAll('[class="find-card"], [class^="find-card "], [class$=" find-card"], [class*=" find-card "]');
您也可以使用
document.querySelectorAll('.find-card');
或
document.getElementsByClassName('find-card');
编辑:
这也有效:
document.querySelectorAll('[class~="find-card"]');