在 react 的 setInterval 之后隐藏

Question

我正在尝试构建一个每 20 秒出现一次并在 5 秒后消失的条。它正在工作，但经常给我错误 document.querySelector(".The_Bar").className = "The_Bar"; 中的 classname 不存在。 那么，有什么方法可以即兴发挥吗？

const Bar = () => {


  React.useEffect(() => {   
    const BarInterval = setInterval(() => {
      document.querySelector(".The_Bar").className = "The_Bar The_Bar_Show";
      const BarTimeout = setTimeout(() => {
        document.querySelector(".The_Bar").className = "The_Bar";
      }, 5000);
      return () => {
        clearTimeout(BarTimeout);
      };
    }, 20000);
    return () => {
      clearInterval(BarInterval);
      setNumber({});
    };
  }, [])

  
  return (
    <div className="The_Bar">
      <div className="Text">You viewing this page</div>
    </div>
  );
}

Answer 1

首先，你为什么在react中使用document.querySelector(".The_Bar").className？

为此你有 useRef.

其次，如果你想显示然后删除一个div，你可以useState动态改变。这样你就可以使用反应钩子控制 class，这更容易和“干净”

const Bar = () => {
const [showBar,setShowBar] = useState(false)

  React.useEffect(() => {   
    const BarInterval = setInterval(() => {
     setShowBar(true)
      const BarTimeout = setTimeout(() => {
     setShowBar(false)
      }, 5000);
      return () => {
        clearTimeout(BarTimeout);
      };
    }, 20000);
    return () => {
      clearInterval(BarInterval);
      setNumber({});
    };
  }, [])

  
  return (
   <div className={showBar ? "The_Bar The_Bar_Show" : "No_Bar"}>
      <div className="Text">You viewing this page</div>
    </div>
  );
}

No_Bar 风格：

{
display:none;
}

Answer 2

在使用 React 时，您不应该使用这种命令式方法来操作 DOM，请尝试以声明方式实现相同的行为：

const Bar = () => {
  const [show, setShow] = useState(false);

  React.useEffect(() => {
    let interval;
    let timeout;

    interval = setInterval(() => {
      setShow(true);
      timeout = setTimeout(() => {
        setShow(false);
      }, 1000);
    }, 5000);
    return () => {
      clearInterval(interval);
      clearTimeout(timeout);
    };
  }, []);

  return (
    show && (
      <div className="The_Bar">
        <div className="Text">You viewing this page</div>
      </div>
    )
  );
};

演示 https://stackblitz.com/edit/react-ehwj9c

在 React 中使用选择器选择 DOM 元素从来都不是一个好主意，React 使用 Virtual DOM 来绘制 DOM 并使其异步，所以你可能会面临所有通过将命令式香草代码与 React 代码混合来解决各种错误和不当行为。您可以使用 refs 访问 DOM 节点，但这也应该非常小心。不像在 Vanilla JS 中那样强制切换 class，只需切换 React 状态，并使用该状态以声明方式切换视图，或切换 className，因为 React 状态会触发 re-render, 这确保一切都以正确的速度进行。

在 react 的 setInterval 之后隐藏

Hide after setInterval in react

javascript

jsx

reactjs