时间戳

首页 > 解决方案 > React 应用程序中元素的控制台日志输出

javascript - React 应用程序中元素的控制台日志输出

问题描述

我正在尝试在 React 生产应用程序的浏览器控制台中获取一个元素，但我得到的是未定义或 null 元素

    >> 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

我想检查该元素，以便在能够在控制台日志中检索该元素后在其上创建一个函数。

我错过了什么吗？

标签： javascriptreactjsbrowser

解决方案

尝试使用参考：

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 访问的播放器。您可以轻松地将其包裹在 a 上<div>并获取该元素：

<div id='myElement'> // or ref={myRef}
  <Player />
</div>

console.log(el.children);

推荐阅读