如何仅在渲染 DOM 后才在 Gatsby 中运行 JavaScript 代码

Question

在 gatsby 站点中放置与 DOM 交互的代码的正确位置在哪里？我想通过在单击另一个元素时添加/删除类来切换某些组件的可见性。

gatsby-browser.js 文件似乎应该包含此代码，但API 似乎在 DOM 加载后并未调用任何函数。

同样，使用 Helmet称它为时过早。无论包含在何处，使用 window.onload 似乎都不会触发。

window.onload = function () {

  // add event listener to the toggle control

}

当 DOM 准备好时，是否有我可以用来运行我的代码的事件？

Answer 1

你真的需要等待 DOM 准备好吗？在 React 中工作时，您需要改变思考这些事情的方式。例如，您可以添加一个更改状态的点击，然后在您的类名道具中反映状态变化。代码示例：import React, { useState } from "react"const MyApp = () => {&nbsp; const [visible, setVisible] = useState(true) // true is the initial state&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <div className={visible ? "visible-class" : "hidden-class"}>&nbsp; &nbsp; &nbsp; &nbsp; My content&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <button onClick={() => setVisible(!visible)}>Click me!</button>&nbsp; &nbsp; </div>&nbsp; )}export default MyApp或者您可以更进一步，甚至在您愿意之前都不要将该内容呈现给 DOM。示例：import React, { useState } from "react"const MyApp = () => {&nbsp; const [visible, setVisible] = useState(true) // true is the inital state&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <button onClick={() => setVisible(!visible)}>Click me!</button>&nbsp; &nbsp; &nbsp; {visible && <div>My content here</div>}&nbsp; &nbsp; </div>&nbsp; )}export default MyApp

Answer 2

您可以将 React 循环寿命与componentDidMount().这需要像这样更新您的组件：import React from 'react'class YourComponent extends React.Component {&nbsp; &nbsp; componentDidMount() {&nbsp; &nbsp; &nbsp; &nbsp; // Your Javascript function here&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="YourComponentHere"></div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}export default YourComponent希望能帮到你！