Javascript 隐藏组件：添加类还是从DOM中删除？

我想在React中经过一段时间后向组件添加一个类，但是我不确定这样做的最佳方法。我想在几秒钟后将“hidden”类添加到加载的图像中，使其变为display:none。然而，当我尝试这一点时，我得到了几个不同的错误

以下是我的组件的代码：

import React from 'react';
import earth from './earth.svg';

const loader = document.getElementsByClassName('loader');

 setTimeout(function(){
            loader.classList.add('hidden');
    }, 3000);


function Loader() {
  return (
    <div className="loader">
      <img src= {earth} alt="earth-loader" />
    </div>

  )
}

export default Loader;

从“React”导入React；
从“/earth.svg”导入地球；
const loader=document.getElementsByClassName（'loader'）；
setTimeout（函数（）{
loader.classList.add（'hidden'）；
}, 3000);
函数加载器（）{
返回(
)
}
导出默认加载程序；

图像会加载，但在设置的时间之后，我会出现错误。我得到的是“无法读取未定义的属性'add'，或者使用document.querySelector之前的命令”，但我得到的是“无法读取null的属性'classList'。我不知道为什么会出现null或未定义的错误，因为loader类确实会显示

我也可以在几秒钟后从App.js中删除该组件吗

function App() {
  return (
    <div className="container">
    <Navbar />
    <Loader />
    <Card />
    </div>
  );
}

函数应用程序（）{
返回(
);
}

---

在React中，最好的方法是什么？

您基本上将React内容与普通Javascript和DOM访问（

document.getElementsByClassName

）混合在一起，这很可能导致许多不同的复杂错误。因此，建议完全停留在React中，并在React组件生命周期内设置类。这意味着如果使用React，您应该很少使用

文档

全局变量

隐藏类的更好示例：

import React from 'react';
import earth from './earth.svg';

function Loader() {
  const [hidden, setHidden] = useState(false);
  const classes = "loader" + (hidden ? " hidden" : "");

  useEffect(() => {
    let timeoutID = setTimeout(() => {
      setHidden(true);
    }, 3000);
    return () => { clearTimeout(timeoutID); };
  }, []);

  return (
    <div className={classes}>
      <img src= {earth} alt="earth-loader" />
    </div>
  );
}

export default Loader;

import React from 'react';
import earth from './earth.svg';

function Loader() {
  const [hidden, setHidden] = useState(false);

  useEffect(() => {
    let timeoutID = setTimeout(() => {
      setHidden(true);
    }, 3000);
    return () => { clearTimeout(timeoutID); };
  }, []);

  if (hidden) {
    return null;
  }

  return (
    <div className="loader">
      <img src= {earth} alt="earth-loader" />
    </div>
  );
}

export default Loader;

从“React”导入React；
从“/earth.svg”导入地球；
函数加载器（）{
const[hidden，setHidden]=useState（false）；
const classes=“loader”+（隐藏？：”）；
useffect（（）=>{
let timeoutID=setTimeout（（）=>{
setHidden（true）；
}, 3000);
return（）=>{clearTimeout（timeoutID）；}；
}, []);
返回(
);
}
导出默认加载程序；

条件渲染的更好示例：

import React from 'react';
import earth from './earth.svg';

function Loader() {
  const [hidden, setHidden] = useState(false);
  const classes = "loader" + (hidden ? " hidden" : "");

  useEffect(() => {
    let timeoutID = setTimeout(() => {
      setHidden(true);
    }, 3000);
    return () => { clearTimeout(timeoutID); };
  }, []);

  return (
    <div className={classes}>
      <img src= {earth} alt="earth-loader" />
    </div>
  );
}

export default Loader;

import React from 'react';
import earth from './earth.svg';

function Loader() {
  const [hidden, setHidden] = useState(false);

  useEffect(() => {
    let timeoutID = setTimeout(() => {
      setHidden(true);
    }, 3000);
    return () => { clearTimeout(timeoutID); };
  }, []);

  if (hidden) {
    return null;
  }

  return (
    <div className="loader">
      <img src= {earth} alt="earth-loader" />
    </div>
  );
}

export default Loader;

从“React”导入React；
从“/earth.svg”导入地球；
函数加载器（）{
const[hidden，setHidden]=useState（false）；
useffect（（）=>{
let timeoutID=setTimeout（（）=>{
setHidden（true）；
}, 3000);
return（）=>{clearTimeout（timeoutID）；}；
}, []);
如果（隐藏）{
返回null；
}
返回(
);
}
导出默认加载程序；

您基本上将React内容与普通Javascript和DOM访问（

document.getElementsByClassName

）混合在一起，这很可能导致许多不同的复杂错误。因此，建议完全停留在React中，并在React组件生命周期内设置类。这意味着如果使用React，您应该很少使用

文档

全局变量

隐藏类的更好示例：

import React from 'react';
import earth from './earth.svg';

function Loader() {
  const [hidden, setHidden] = useState(false);
  const classes = "loader" + (hidden ? " hidden" : "");

  useEffect(() => {
    let timeoutID = setTimeout(() => {
      setHidden(true);
    }, 3000);
    return () => { clearTimeout(timeoutID); };
  }, []);

  return (
    <div className={classes}>
      <img src= {earth} alt="earth-loader" />
    </div>
  );
}

export default Loader;

import React from 'react';
import earth from './earth.svg';

function Loader() {
  const [hidden, setHidden] = useState(false);

  useEffect(() => {
    let timeoutID = setTimeout(() => {
      setHidden(true);
    }, 3000);
    return () => { clearTimeout(timeoutID); };
  }, []);

  if (hidden) {
    return null;
  }

  return (
    <div className="loader">
      <img src= {earth} alt="earth-loader" />
    </div>
  );
}

export default Loader;

从“React”导入React；
从“/earth.svg”导入地球；
函数加载器（）{
const[hidden，setHidden]=useState（false）；
const classes=“loader”+（隐藏？：”）；
useffect（（）=>{
let timeoutID=setTimeout（（）=>{
setHidden（true）；
}, 3000);
return（）=>{clearTimeout（timeoutID）；}；
}, []);
返回(
);
}
导出默认加载程序；

条件渲染的更好示例：

import React from 'react';
import earth from './earth.svg';

function Loader() {
  const [hidden, setHidden] = useState(false);
  const classes = "loader" + (hidden ? " hidden" : "");

  useEffect(() => {
    let timeoutID = setTimeout(() => {
      setHidden(true);
    }, 3000);
    return () => { clearTimeout(timeoutID); };
  }, []);

  return (
    <div className={classes}>
      <img src= {earth} alt="earth-loader" />
    </div>
  );
}

export default Loader;

import React from 'react';
import earth from './earth.svg';

function Loader() {
  const [hidden, setHidden] = useState(false);

  useEffect(() => {
    let timeoutID = setTimeout(() => {
      setHidden(true);
    }, 3000);
    return () => { clearTimeout(timeoutID); };
  }, []);

  if (hidden) {
    return null;
  }

  return (
    <div className="loader">
      <img src= {earth} alt="earth-loader" />
    </div>
  );
}

export default Loader;

从“React”导入React；
从“/earth.svg”导入地球；
函数加载器（）{
const[hidden，setHidden]=useState（false）；
useffect（（）=>{
let timeoutID=setTimeout（（）=>{
setHidden（true）；
}, 3000);
return（）=>{clearTimeout（timeoutID）；}；
}, []);
如果（隐藏）{
返回null；
}
返回(
);
}
导出默认加载程序；

没有必要使用

clearTimeout

尽管@gmoniva很遗憾，这不适用于React。如果您没有清除超时，并且组件在超时结束前卸载，您会收到一个错误，说明您无法更新已卸载组件的状态（通过函数

setHidden

）。啊，是的，在这种情况下，您缺少一个空数组作为中的第二个参数useEffect@lissettdm非常感谢。没有必要使用

clearTimeout

，但遗憾的是@gmoniva不适用于React。如果您没有清除超时，并且组件在超时结束前卸载，您会收到一个错误，说明您无法更新已卸载组件的状态（通过函数

setHidden

）。啊，是的，在这种情况下，您缺少一个空数组作为中的第二个参数useEffect@lissettdm非常感谢。