将要实现的jQuery代码转换为Gatsby

$(document).ready(function() {
  $('.my-button').click(function() {
    $('.my-element').toggle();
  });
});

npm install react react-dom gatsby

import React, { useState } from 'react';

const MyComponent = () => {
  const [isVisible, setIsVisible] = useState(false);

  const handleClick = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <button className="my-button" onClick={handleClick}>
        Toggle
      </button>
      {isVisible && <div className="my-element">Hello Gatsby!</div>}
    </div>
  );
};

export default MyComponent;

import React from 'react';
import MyComponent from '../components/MyComponent';

const IndexPage = () => {
  return (
    <div>
      <h1>Gatsby Example</h1>
      <MyComponent />
    </div>
  );
};

export default IndexPage;