Question

我有一个函数，它可以捕获元素并添加类“ 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中。

Answer 1

您可以将其放在页脚（或始终加载的地方）中：

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

使用BUILT版本的文件的路径。因此，您应该将脚本放在“ static / js /”中，并且应该能够从那里导入脚本。

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

我应该在Gatsby项目中的哪里放置“ main.js”文件？

1 个答案: