Javascript 有没有办法在React中使用我的JS文件？导出或脚本标记等？

我有一个JS文件，它使一些元素在鼠标点击时出现/消失。这在普通JS中运行良好。我现在正在使用React构建我的应用程序，但我无法获得此功能。正如您所看到的，我已经尝试了

export

/

import

，并且在我的

index.html

中尝试了

script:src

// Options appear on hover
export const optionsBtn = document.querySelector("[data-function='options']");
export const hiddenButtons = [...document.querySelectorAll(".hidden")];

export function optionsHover() {
  hiddenButtons.forEach(button => button.classList.toggle("hidden"));
}

optionsBtn.addEventListener("mouseenter", optionsHover);
optionsBtn.addEventListener("click", optionsHover);

不确定我如何让这个代码在React中工作。

---

我在这里遗漏了什么吗？

您可以尝试导入'yourfile.js'或

require（'your js file'）

这不是理想的方法。但是，如果您想使用它，这里有一些解决方法：

在React应用程序中将JS代码转换为简单的JS类

在相应的React组件中创建类的实例（对象）

将React组件的事件与所述对象的 作用

这将足以在React应用程序中使用您现有的JS。

注意

这不是最好的做法。不应直接操纵DOM 当使用reactJS时，理想情况下不应该这样做，因为reactJS需要 注意DOM操作，并为此进行了高度优化

如果您必须使用JS，并且不能使用React组件重写它

您可以使用

require（'yourfile.js'）

导入脚本，但由于您的js正在尝试访问dom元素，因此您希望在呈现dom元素后执行js

您可以通过要求根应用程序组件的

componentDidMount

中的

yourfile.js

来实现这一点

下面是一个例子

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

let myjs;

class App extends Component {
  constructor() {
    super();
  }

  componentDidMount() {
    myjs = require("./yourfile"); // Import file here after component mounted
    myjs.optionsHover();
  }

  render() {
    return (
      <div>
        <div>
          <button data-function="options">Option</button>
          <button class="hidden">Button</button>
          <button class="hidden">Button</button>
          <button class="hidden">Button</button>
          <button class="hidden">Button</button>
          <button class="hidden">Button</button>
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

import React，{Component}来自“React”；
从“react dom”导入{render}；
导入“/style.css”；
让我来；
类应用程序扩展组件{
构造函数（）{
超级（）；
}
componentDidMount（）{
myjs=require（“./yourfile”）；//安装组件后在此处导入文件
myjs.options悬停（）；
}
render（）{
返回(
选项
按钮
按钮
按钮
按钮
按钮
);
}
}
render（.
如果在网页上以普通脚本加载文件，则不能使用模块语法（即，删除
导出
）。但不确定这与React有何关系。该文件将创建全局变量和函数，您可以在所有JS代码中正常使用。尝试将直接DOM操作与React混合使用是一场噩梦。React旨在接管DOM操作的管理。这可能会起作用，但会涉及很多跳跃在React组件生命周期的特定阶段进行绑定和绑定。改用React样式重写现有代码。此链接很好地解释了如何将JS添加到React:@Quentin谢谢。我想我只是太懒了。我认为这两者可以一起工作（React和其他javascript）在必要的地方。@Adds-不，它没有。它是一个（有点过时了）将React添加到网页的指南。它与使其与已经存在的与DOM交互的JS很好地发挥作用无关。这将使JS运行但不起作用。DOM元素不会及时可用。当它到达最后两行时会引发异常。不，这不是最佳做法。DOM不应在在使用reactJS时，理想情况下不应该这样做，因为react负责DOM操作，并且为此进行了高度优化。
import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

let myjs;

class App extends Component {
  constructor() {
    super();
  }

  componentDidMount() {
    myjs = require("./yourfile"); // Import file here after component mounted
    myjs.optionsHover();
  }

  render() {
    return (
      <div>
        <div>
          <button data-function="options">Option</button>
          <button class="hidden">Button</button>
          <button class="hidden">Button</button>
          <button class="hidden">Button</button>
          <button class="hidden">Button</button>
          <button class="hidden">Button</button>
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));