隐藏组件:添加类还是从DOM中移除

Question

我想在React中添加一个类，但我不确定最好的方法。我想添加"；隐藏的"；类在几秒钟后加载图像，使其变为显示：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;

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

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

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

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

Answer 1

您基本上将React内容与普通Javascript和DOM访问(document.getElementsByClassName(混合在一起，这很可能会导致许多不同且复杂的错误。因此，建议完全留在React中，并在React组件的生命周期中设置类。这意味着如果您使用React，您应该很少使用document全局变量。

隐藏类的更好示例：

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;