Javascript react gatsby:动态添加css类在产品构建中不起作用

我需要在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*/}
  )
}

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

const Container=（{divClass}）=>{
const Container = ({ divClass }) => {
  useEffect(() => {
    const containerDiv = document.querySelector("#containerDiv");

    containerDiv.classList.add(divClass);
  }, []);

  return (
    <div id="containerDiv"></div>
  )
}

useffect（（）=>{
const containerDiv=document.querySelector（“#containerDiv”）；
containerDiv.classList.add（divClass）；
}, []);
返回(
)
}

您是否尝试过在

useffect

中手动操作dom

---

我知道这可能不是最理想的解决方案，但也许它解决了问题。lol

您的代码在第一次尝试时不起作用，因为此时您正在定义

const[cssClass，setcssClass]=useState（divClass）

，您的

及其类（

divClass

或

cssClass

）尚未定义

解决方案是使用带有空dep（

[]

）的

useffect

钩子，因为它是一个在加载DOM树（以及其中的

）后触发的函数

我不推荐使用的方法（除了有效之外），因为它直接影响DOM，这就是为什么要使用React而不是jQuery（创建虚拟DOM来操作）的原因。通过使用基于React的hook方法，可以获得相同的结果

const容器=（{divClass}）=>{
const containerDivRef=useRef（null）；
useffect（（）=>{
containerDivRef.current.classList.add（divClass）
}, []);
返回(
)
}

您的

信息存储在

容器divref.current

中，存储方式与使用

document.querySelector

完全相同，但不会影响DOM

---

您提到的

develope

和

build

之间的差异是由网页包的资产处理和盖茨比的配置造成的。由于使用

gatsby develop

（运行时）允许您在

gatsby build

（buildtime）中使用浏览器的API（例如

窗口

，

文档

，其他全局或DOM对象），因此代码在服务器端处理，其中不允许（甚至创建）这些变量，这就是为什么你通常应该等他们。您可以在中查看更多详细信息。

divClass的初始值是多少？

divClass的初始值设置正确，但后续渲染时的值未设置为classHi Joimee，感谢您的回答，是的，它解决了问题，但我想知道为什么prod和devbuild中的代码运行方式不同，感谢Ferran的深刻回答。但有一件事我不明白，这是怎么在开发构建中起作用的？开发和生产构建不应该有不同的工作方式。我正在通过添加此反馈更新我的答案。希望有帮助！它不应该是
ref={containerDivRef}
我也在解决这个问题<代码>开发

和

构建

通常以完全相同的方式工作。如果使用全局对象（例如

窗口

或

文档

等），它们可能会有所不同。在使用此类对象或任何使用

窗口

进行计算的第三方库时，您应该仔细检查您的项目，以确保在

构建

模式下也能正常工作。让我来挖掘文档以更好地理解差异。

const Container = ({ divClass }) => {
  useEffect(() => {
    const containerDiv = document.querySelector("#containerDiv");

    containerDiv.classList.add(divClass);
  }, []);

  return (
    <div id="containerDiv"></div>
  )
}

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

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

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