我在 Gatsby 项目中将“main.js”文件放在哪里？答案

【问题标题】：Where do I put "main.js" file in Gatsby project?我在 Gatsby 项目中将“main.js”文件放在哪里？
【发布时间】：2019-10-20 05:16:47
【问题描述】：

我有一个函数可以抓取一个元素并添加“is-open”类以切换手风琴。我已将此函数放在我的“main.js”中。

在我的FAQ组件中，当用户点击手风琴栏时需要调用这个函数。

我的问题是：如何在我的 Gatsby.js / React 项目中导入这个 main.js 文件？

我尝试了索引或组件本身。但是只有在我对 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 中添加标签。

【问题讨论】：

标签： javascript reactjs gatsby

【解决方案1】：

你可以把它放在你的页脚（或一些总是加载的地方）：

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

使用 BUILT 版本的文件路径。所以你应该把脚本放在“static/js/”中，你应该可以从那里导入它。

但这并不是你真正想要使用 Gatsby 的方式。 Gatsby 是基于 React 构建的，因此对于 reactive JavaScript，您应该真正使用 React。如果您开始在背后更新 DOM，它无法预测 DOM 的状态。此外，这应该很容易在 React 中使用简单的 onClick 处理程序重新创建。

【讨论】：