How to run JavaScript code in Gatsby only after rendering DOM - Stack Overflow

admin管理员组

文章数量:1414921

Where's the right place to put code that interacts with the DOM in a gatsby site? I want to toggle the visibility of some ponents by adding/removing a class when another element is clicked.

The gatsby-browser.js file seems like it should contain this code but the API doesn't seem to call any of the functions after the DOM has loaded.

Similarly, using Helmet calls it too soon. Using window.onload never seems to trigger at all regardless of where it's included.

window.onload = function () {
  // add event listener to the toggle control
}

Is there an event I can use to run my code when the DOM is ready?

Where's the right place to put code that interacts with the DOM in a gatsby site? I want to toggle the visibility of some ponents by adding/removing a class when another element is clicked.

The gatsby-browser.js file seems like it should contain this code but the API doesn't seem to call any of the functions after the DOM has loaded.

Similarly, using Helmet calls it too soon. Using window.onload never seems to trigger at all regardless of where it's included.

window.onload = function () {
  // add event listener to the toggle control
}

Is there an event I can use to run my code when the DOM is ready?

• javascript
• gatsby

Share Improve this question Follow asked Jul 24, 2019 at 23:35 Geraint AndersonGeraint Anderson 3,39344 gold badges3131 silver badges5656 bronze badges 1

• reactjs/tutorial/… – ksav Commented Jul 25, 2019 at 6:20

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Do you really need to wait for the DOM to be ready? When working in react you need to change the way you think about these things. For example you could add an on click that changes state and then reflect the state change in your classname prop.

Code Example:

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

Or you could take it a step further and not even render that content to the DOM until you want to.

Example:

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

You can use the React cyclelife with ponentDidMount().

This need to update your ponent like that :

import React from 'react'

class YourComponent extends React.Component {
    ponentDidMount() {
        // Your Javascript function here
    }

    render() {
        return(
            <div className="YourComponentHere"></div>
        )
    }
}

export default YourComponent

Hope that help you!

If your ponent is a functional ponent, try using React Hook useEffect, which will guarantee the execution after the ponent is rendered.

import React, { useEffect } from 'react'

const MyComponent = () => {

    useEffect(() => {
        console.log("Document loaded");
    });

    return (
        <main>
          <text>Pretty much the ponent's body code around here</text>
        </main>
    )
}

export default MyComponent

本文标签： How to run JavaScript code in Gatsby only after rendering DOMStack Overflow