javascript - 将 jQuery 插件导入到 React 组件中？

Question

由于我不会详细介绍的原因，我需要使用 Spectrum.js在 React 组件中。但是，我无法让它正常工作。

我通过 npm install -D jquery Spectrum-colorpicker 安装了 jQuery 和 Spectrum，并且我正在尝试将它们导入到组件中:

import $ from 'jquery';
import spectrum from 'spectrum-colorpicker';

jQuery 按预期工作，但我无法让 Spectrum 完成它的工作。我总是收到 TypeError: $(...).spectrum is not a function 因为 Spectrum 似乎未定义。

我对 React 很陌生，所以我确信我只是做了一些明显错误的事情。我尝试过谷歌搜索，但没有找到任何帮助。 FWIW，我也这样做来初始化 Spectrum:

componentDidMount() {
  $('#custom').spectrum({ color: '#f00' });
}

如果这也很重要，我正在使用 Parcel作为我的捆绑商。

Answer 1

说实话，我认为在 React 中使用 jQuery 或任何 jQuery 插件根本不是一个好主意。有很多专门为 React 构建的即插即用的替代方案。

使用两者的问题是它们的作用有重叠。 React 假设没有其他任何东西正在修改 DOM，这可能会产生意想不到的结果。

看起来您使用的 Spectum 本身没有 React 包，但有很多替代品(例如: https://github.com/casesandberg/react-color )。我还创建了一个 stackblitz 来演示代码 ( https://stackblitz.com/edit/react-rme3f4?embed=1&file=Hello.js )。

我希望这对于您的示例来说效果更好。需要一点时间来适应它，但是有很好的文档，我认为当您开始使用它时，它会很有意义。