Reactjs React功能组件：立即调用getElementById返回null

如果我添加一个0毫秒的超时，那么我可以控制台记录我用

document.getElementById

选择的元素，但是如果我删除0毫秒的超时，它们都返回null。这是怎么回事

import React from 'react';

const Warning: React.FC = () => {

  setTimeout(() => {
    const confirm = document.getElementById("confirm");
    const invalid = document.getElementById("invalid");
    const confirmed = document.getElementById("confirmed");
    const warningBar = document.getElementById("warning-bar");
    console.log(confirm);
    console.log(invalid);
    console.log(confirmed);
    console.log(warningBar);
  },0);

  return (
    <div>
        <section className='warning-bar' id='warning-bar'>
            <div className='confirm' id='confirm'>Confirm</div>
            <div className='invalid' id='invalid'>Invalid</div>
            <div className='confirmed' id='confirmed'>Confirmed</div>
        </section>
    </div>
  );
}

export {Warning};

从“React”导入React；
常量警告：React.FC=（）=>{
设置超时（（）=>{
const confirm=document.getElementById（“confirm”）；
const invalid=document.getElementById（“无效”）；
const confirm=document.getElementById（“已确认”）；
const warningBar=document.getElementById（“警告栏”）；
控制台日志（确认）；
console.log（无效）；
控制台日志（已确认）；
控制台日志（警告栏）；
},0);
返回(
证实
无效的
证实
);
}
导出{警告}；

它是在加载组件之前执行的，因此您需要首先呈现dom，然后获取dom元素

使用并提供一个空的依赖项数组作为第二个参数，回调函数将在组件第一次呈现后调用

import React, { useEffect } from 'react';

const Warning: React.FC = () => {
  useEffect(() => {
    const confirm = document.getElementById("confirm");
    const invalid = document.getElementById("invalid");
    const confirmed = document.getElementById("confirmed");
    const warningBar = document.getElementById("warning-bar");
    console.log(confirm);
    console.log(invalid);
    console.log(confirmed);
    console.log(warningBar);
  }, []);

  return (
    <div>
      <section className='warning-bar' id='warning-bar'>
        <div className='confirm' id='confirm'>Confirm</div>
        <div className='invalid' id='invalid'>Invalid</div>
        <div className='confirmed' id='confirmed'>Confirmed</div>
      </section>
    </div>
  );
};

import React，{useffect}来自“React”；
常量警告：React.FC=（）=>{
useffect（（）=>{
const confirm=document.getElementById（“confirm”）；
const invalid=document.getElementById（“无效”）；
const confirm=document.getElementById（“已确认”）；
const warningBar=document.getElementById（“警告栏”）；
控制台日志（确认）；
console.log（无效）；
控制台日志（已确认）；
控制台日志（警告栏）；
}, []);
返回(
证实
无效的
证实
);
};

ok听起来不错，如何在不使用超时的情况下将执行延迟到dom渲染完成？您可以使用useEffect钩子实现这一点为什么会发生？getElementById在呈现任何内容之前执行，因此需要添加超时或将其添加到生命周期挂钩中。如果出于某种原因，您确实希望引用元素，那么您应该在元素上使用ref属性。类似的问题。在这里检查答案。