Есть ли способ использовать мои JS-файлы в React? Экспорт или сценарий теги и т. Д.?

Question

У меня есть файл JS, который заставляет некоторые элементы появляться / исчезать при щелчке мышью. Это нормально работает в обычном JS. Сейчас я создаю свое приложение, используя React, но я не могу получить эту функциональность. Я пробовал export / import, как вы можете видеть, и script:src в моем index.html.

// 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. Я что-то здесь упускаю?

Answer 1

Это не идеальный подход . Однако, если вы хотите использовать это, вот обходной путь:

1. Преобразование вашего кода JS в простой класс JS в вашем приложении React
2. Создание экземпляра (объекта) класса в соответствующемКомпонент React
3. Свяжите события компонента React с функцией указанного объекта

Этого будет достаточно для использования существующего JS в приложении React.

Answer 2

ПРИМЕЧАНИЕ

Это не лучшая практика. DOM не следует манипулировать напрямую при использовании activJS, вы не должны делать это в идеале, так как реагирует на манипуляции с DOM, и он очень оптимизирован для этого.

Если вам нужно использовать JS и переписатьиспользование React Component не является опцией,

Вы можете импортировать свой сценарий, используя require('yourfile.js'), но поскольку ваш JS пытается получить доступ к элементам dom, вы захотите выполнить JS после визуализации элементов dom.

Это можно сделать, потребовав yourfile.js от componentDidMount метода жизненного цикла вашего корневого компонента приложения.

Ниже приведен пример

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"));

Вот полный фрагмент .

Answer 3

можно попробовать import 'yourfile.js' или require('your js file')

const myScript = require('script')

then myScript.something()