Question

我正在尝试将一些静态html / css站点转换为react.js。在script标签中，此函数在每次加载窗口时应用一些CSS过渡。这是下面的功能：


window.addEventListener('load', function() {
   document.querySelectorAll('.progress-custom-bar-fill').forEach(e => {
      e.style.width = `${e.getAttribute('fill-progress')}%`;
      })
})

        <div
          className={`progress-custom-bar-fill ${goodOrOk}`}
          fill-progress={progress}
        />

我尝试将样式属性直接添加到div上，如下所示：

         <div
          style={{ width: `${progress}%` }}
          className={`progress-custom-bar-fill ${goodOrOk}`}
          fill-progress={progress}
        />

它有效，但不适用于CSS Transiton

我尝试过useEffect，它仅在窗口加载时第一次起作用，但是在页面之间切换时不起作用。这是我尝试过的：

useEffect(() => {
    function updateProgressBar() {
      document.querySelectorAll('.progress-custom-bar-fill').forEach((e) => {
        e.style.width = `${e.getAttribute('fill-progress')}%`;
      });
    }
    window.addEventListener('load', updateProgressBar);
    return () => window.removeEventListener('load', updateProgressBar);
  });

如何使useEffect在加载事件时重新呈现？还是对此有其他解决方案？预先感谢

如何在每次组件重新渲染时触发useEffect中的加载事件侦听器？

0 个答案: