导出您的 js 代码，然后将其导入您的 React 组件中。

export function toggleIcon() {
  $('.toggle-icon').on('click', function() {
    if ($(this).hasClass("active")) {
      $(this).removeClass('active');
      $(this).next().slideUp();
    } else {
      $(this).find('.toggle-icon').removeClass('active');
      $(this).find('ul').slideUp();
      $(this).addClass('active').next().slideDown();
    }
  });
}

然后你可以将它导入你的 React 组件中。

// custom is the path to the file that holds your js code
import { toggleIcon } from './custom';

然后在你的 React 组件中调用它，例如在像componentDidMount.

componentDidMount() {
  toggleIcon();
}

另一种（更快）的方法是require在你的 react 组件中使用来加载 js 代码。

require('./custom');

这样您就可以立即加载 js 代码，并且不需要制作函数的可导出版本，它只需要该文件。

你需要导出你的文件，然后将它导入到你的 React-app 中，建议在你的 React 应用中包含这些类型的逻辑，但如果你真的需要，导出你的函数并导入你需要的 React 组件中，你可以命名你的函数，就像下面的代码：

export function toggleIcon () {
     $('.toggle-icon').on('click', function() {
      if ($(this).hasClass("active")) {
        $(this).removeClass('active');
        $(this).next().slideUp();
    } else {
        $(this).find('.toggle-icon').removeClass('active');
        $(this).find('ul').slideUp();
        $(this).addClass('active').next().slideDown();
    }
}

并导入它：

import {toggleIcon} from 'custom';

toggleIcon(); // call your external function like this

尝试将ToogleIcon而不是toogleIcon放在您想要实例化的组件中。

import {ToggleIcon} from 'custom';

ToggleIcon(); // call your external function like this

而export default不是export

export default function toggleIcon () {
 $('.toggle-icon').on('click', function() {
  if ($(this).hasClass("active")) {
    $(this).removeClass('active');
    $(this).next().slideUp();
} else {
    $(this).find('.toggle-icon').removeClass('active');
    $(this).find('ul').slideUp();
    $(this).addClass('active').next().slideDown();
}
}