如何仅在渲染 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 = () => {

  const [visible, setVisible] = useState(true) // true is the initial state

  return (

    <div>

      <div className={visible ? "visible-class" : "hidden-class"}>

        My content

      </div>

      <button onClick={() => setVisible(!visible)}>Click me!</button>

    </div>

  )

}

export default MyApp

或者您可以更进一步，甚至在您愿意之前都不要将该内容呈现给 DOM。

示例：

import React, { useState } from "react"

const MyApp = () => {

  const [visible, setVisible] = useState(true) // true is the inital state

  return (

    <div>

      <button onClick={() => setVisible(!visible)}>Click me!</button>

      {visible && <div>My content here</div>}

    </div>

  )

}

export default MyApp

Answer 2

您可以将 React 循环寿命与componentDidMount().

这需要像这样更新您的组件：

import React from 'react'

class YourComponent extends React.Component {

    componentDidMount() {

        // Your Javascript function here

    }

    render() {

        return(

            <div className="YourComponentHere"></div>

        )

    }

}

export default YourComponent

希望能帮到你！