如何解决React应用程序中元素的控制台日志输出
我正在尝试在React生产应用程序的浏览器控制台中获取一个元素,但是我得到的是未定义或空元素
>> var el = document.querySelectorAll("div[data-reactid*='.0.0.1.0:$_player=15umwWNrNpKC=16QvOqH6ISlZ.0.5:$c457.1:$c464.$slideobject593']");
<- undefined
>> typeof(el)
<- "object"
>> el[0]
<- undefined
我想检查该元素,以便一旦能够在控制台日志中检索到该元素,就可以在该元素上创建一个函数。
我想念什么吗?
解决方法
尝试使用裁判:
import { useRef,useEffect } from 'react';
function MyComponent() {
const myRef = useRef();
useEffect(() => {
console.log('element:',myRef.current);
},[myRef]);
return (
<div>
<h3 ref={myRef}>Hi</h3>
</div>
);
}
如果唯一的目标是打印元素而不需要在React中使用它,那么最简单的方法是现在为其分配一个id
:
return (
<div><h3 id='myElement'>...
);
const el = document.getElementById('myElement');
console.log(el);
编辑:根据您的查询选择器数据,您似乎正在使用某种类型的播放器,而该播放器可能无法通过ref到达。您可以轻松地将其包装在<div>
周围并获取该元素:
<div id='myElement'> // or ref={myRef}
<Player />
</div>
console.log(el.children);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。