將 jQuery 插件導入 React 組件？

Question

由於我不會介紹的原因，我需要在 React 組件中使用Spectrum.js 。 但是，我不能讓它表現。

我通過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 ）。

我希望這對您的示例更有效。 有點習慣了，但是有很好的文檔，我認為當您開始使用它時會很有意義。