Импортировать плагин jQuery в компонент React?

Question

По причинам, в которые я не буду входить, мне нужно использовать Spectrum. js в компоненте React. Тем не менее, я не могу заставить его вести себя.

Я установил jQuery и Spectrum через npm install -D jquery spectrum-colorpicker, и я пытаюсь импортировать их в компонент:

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

jQuery работает как задумано, но я не могу заставить Спектрум делать это. Я всегда получаю TypeError: $(...).spectrum is not a function, так как кажется, что Спектр не определен.

Я очень новичок в React, поэтому я уверен, что просто делаю что-то явно неправильное. Я попробовал Google, но ничего, с чем я столкнулся, не помогло FWIW, я также делаю это для инициализации Spectrum:

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

На случай, если это тоже важно, я использую Parcel в качестве своего упаковщика.

Answer 1

Если честно, я не думаю, что было бы хорошей идеей вообще использовать jQuery или любой плагин jQuery в React. Существует множество альтернатив, специально разработанных для React, которые являются подключи и играй.

Проблема с использованием обоих заключается в том, что их действия частично совпадают. React предполагает, что ничто иное не модифицирует DOM, что может привести к неожиданным результатам.

Похоже, что используемый вами Spectum не имеет самого пакета React, но есть много альтернатив (например: https://github.com/casesandberg/react-color). Я также создал стек для демонстрации кода (https://stackblitz.com/edit/react-rme3f4?embed=1&file=Hello.js).

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