javascript - document.querySelector 在我的反应组件中不起作用
问题描述
function Slider() {
const track=document.querySelector('.slide__track')//To access the div with class slide track
console.log(track);
return (
<div className="slider">
<i className="fas fa-chevron-left"></i>
<div className="head">
<h1 className="title">Based on your last search</h1>
<h6>View more</h6>
</div>
<div className="slider_container">
<ul className="slider__track">
<li className="slider__items">
<Card />
</li>
</ul>
</div>
<i className="fas fa-chevron-right"></i>
</div>
);
}
我无法使用类 slide__track 访问 div。这里有什么问题?或者我如何访问该元素?
解决方案
我认为这是因为它在 DOM 渲染之前运行。将轨道代码移动到 useEffect 中。
import {useEffect} from "react";
function Slider() {
useEffect(() => {
const track=document.querySelector('.slide__track')//To access the div with class slide track
console.log(track);
});
return (
<div className="slider">
<i className="fas fa-chevron-left"></i>
<div className="head">
<h1 className="title">Based on your last search</h1>
<h6>View more</h6>
</div>
<div className="slider_container">
<ul className="slider__track">
<li className="slider__items">
<Card />
</li>
</ul>
</div>
<i className="fas fa-chevron-right"></i>
</div>
);
}
推荐阅读
- javascript - 'onClick()' 方法不能正常工作?
- c# - 从一个项目构建多个 exe
- java - Spring hibernate 与 spring boot 2.1.x 的兼容性
- ios - 当从另一个控制器(弹出窗口)访问 UILabel(作为一个插座)时,它仍然为零
- android - 在 Nativescript 中以编程方式滚动到 ScrollView 的视图底部
- laravel - 在我看来,Foreach 循环有未定义的变量
- javascript - Javascript正则表达式验证电话号码
- java - 在树状结构中迭代 n 深度
- vue.js - 使用 vue.js 递增和渲染文本
- node.js - 您如何通过管道连接多个流?