隐藏组件：添加 class 或从 DOM 中删除？

Question

我想在 React 中经过一定时间后向组件添加 class，但是我不确定执行此操作的最佳方法。我想在几秒钟后将“隐藏”class 添加到加载图像，以便它变为显示：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 或 undefined 错误，因为加载程序 class 确实显示了。

我也可以在几秒钟后从 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;

隐藏组件：添加 class 或从 DOM 中删除？

Hiding components: adding a class or removing from the DOM?

javascript

settimeout

reactjs