我在 Gatsby 項目中將“main.js”文件放在哪里？

Question

我有一個 function 抓取一個元素並添加 class “is-open”以切換手風琴。 我已將此 function 放入我的“main.js”中。

在我的 FAQ 組件中，當用戶單擊手風琴欄時，需要調用此 function。

我的問題是：如何在 Gatsby.js / React 項目中導入這個 main.js 文件？

我嘗試了索引或組件本身。 但是只有在我對 main.js 文件進行更改時才會調用它。 顯然，我希望在頁面加載時立即調用它。

這是我的 main.js 文件中的 function：

  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 的 state 是什么。 此外，這應該很容易在 React 中使用簡單的 onClick 處理程序重新創建。