Где я могу поместить файл "main.js" в проект Gatsby?

Question

У меня есть функция, которая захватывает элемент и добавляет класс "is-open" для переключения аккордеона. Я поместил эту функцию в мой файл main.js.

В моем компоненте FAQ эту функцию нужно вызывать, когда пользователь нажимает на аккордеонную панель.

Мой вопрос: как мне импортировать этот файл main.js в мой проект Gatsby.js / React?

Я пытался в индексе или в самом компоненте. Но он вызывается только после внесения изменений в файл main.js. Очевидно, я хочу, чтобы он вызывался сразу после загрузки страницы.

Это функция в моем файле main.js:

  const accordionEl = document.getElementsByClassName("faq-module--accordion-title--2zVOe")
  if (accordionEl.length) {
    for (let i = 0; i < accordionEl.length; i++) {
      accordionEl[i].addEventListener("click", function() {
        this.parentNode.classList.toggle("is-open")
        const panel = this.nextElementSibling
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null
        } else {
          panel.style.maxHeight = `${panel.scrollHeight}px`
        }
      })
    }
  }

Как я уже сказал, я пыталсядобавьте это так в моем компоненте FAQ:

import "../js/main..js"

Я также пытался добавить его в index.html с тегами.

Answer 1

Вы можете поместить это в нижний колонтитул (или в другое место, которое всегда загружается):

<script src={`path/to/main.js`}></script>

Использовать путь к файлу версии BUILT. Поэтому вам, вероятно, следует поместить скрипт в «static / js /», и вы сможете импортировать его оттуда.

Но на самом деле вы не хотите использовать Gatsby. Gatsby построен на React, поэтому для реактивного JavaScript вам действительно следует использовать React. Он не может предсказать состояние DOM, если вы начнете обновлять его за его спиной. Кроме того, это должно быть действительно легко воссоздать в React с помощью простого обработчика onClick.