javascript - react Gatsby : adding css class dynamically not working in prod build

Question

我需要在 div 上动态添加一个 css 类。为此，我设置了这样的 css 类:-

const Container = ({ divClass }) => {
  const [cssClass, setcssClass] = useState(divClass)
  return (
    <div id="containerDiv" className={cssClass} ></div>
    {/* <div id="containerDiv" className={divClass} ></div>   even this doesn't work*/}
  )
}

这在开发构建中按预期工作，但在生产构建中不起作用。如果我将类设置为 divClass，即使不使用状态，它也无法在产品构建中工作。

它只有在我使用 setcssClass 设置状态后才有效，就像这样-

const Container = ({ divClass }) => {
  const [cssClass, setcssClass] = useState(divClass)
  return (
    <div id="containerDiv" className={cssClass} onClick={() => setcssClass('testtt')}></div>
  )
}

谁能解释一下开发和生产构建中的这种差异？

Answer 1

您的代码在第一次尝试时无法正常工作，因为此时您正在定义 const [cssClass, setcssClass] = useState(divClass) , 你的 <div>它的类(divClass 或 cssClass)尚未定义。

解决方案是使用 useEffect Hook 空 deps ( [] )，因为它是一个在加载 DOM 树(以及其中的 <div>)后触发的函数。

我不推荐 other answer 的方法(除了有效之外)因为它直接影响 DOM，这就是您使用 React 而不是 jQuery 的原因(您创建了一个虚拟 DOM 来操作)。您可以通过将基于 React 的方法与 useRef 结合使用来获得相同的结果。钩子(Hook)。

const Container = ({ divClass }) => {
  const containerDivRef = useRef(null);
  

  useEffect(() => {
    containerDivRef.current.classList.add(divClass)
  }, []);

  return (
    <div ref={containerDivRef}></div>
  )
}

你的 <div>信息存储在 containerDivRef.current 中与使用 document.querySelector 的方式完全相同但不影响 DOM。

您提到的develop之间的差异和 build是由 webpack 的 Assets 处理和 Gatsby 的配置引起的。自从有了 gatsby develop (运行时)允许您在 window 中使用浏览器的 API(例如 document、gatsby build、其他全局或 DOM 对象) (构建时)代码在服务器端处理，不允许(甚至创建)这些变量，这就是为什么您通常应该等待它们。您可以在 Overview of the Gatsby Build Process documentation 中查看更多详细信息.