React JS ES6 с конфигурацией редактора Froala

Question

Я новичок в ReactJS, и я делаю проект с ReactJS ES6. В моем проекте я использую редактор Froala Editor, он отлично работает. Но теперь у меня новая функция требует, чтобы редактор Froala добавлял текст ввода, текстовую область, чтобы Froala нуждалась в дополнительной настройке. Я не знаю, где разместить конфигурацию в компоненте ReactJS. Вот мой компонент React.

import FroalaEditor from 'react-froala-wysiwyg' 
import FroalaEditorView from 'react-froala-wysiwyg/FroalaEditorView' 

class RequestFormComponent extends Component { 
    constructor(props) { 
     super(props); 

     this.handleModelChange = this.handleModelChange.bind(this); 
     $.FroalaEditor.DefineIcon('insertInputField', {NAME: 'plus'}); 
     $.FroalaEditor.RegisterCommand('insertInputField', { 
      title: 'Insert InputField', 
      focus: true, 
      undo: true, 
      refreshAfterCallback: true, 
      callback: function() { 
       this.html.insert(some input text); 
      } 
     }); 

     this.state = this._getState(); 
    } 

    _getState() { 
     return { 
      content: "Some text", 
      config: { 
       toolbarButtons: ['undo', 'redo', 'clearFormatting', 'selectAll', 'html', 'insertInputField'] 
      } 
     } 
    } 

    handleModelChange(model) { 
     this.setState({content: model}); 
    } 
    render() { 
     return (
      <FroalaEditor 
       model={this.state.content} 
       onModelChange={this.handleModelChange} 
       config = {this.state.config} 
      /> 
     ) 
    } 

Если я конфиг так, консоль появится сообщение об ошибке «Не удается прочитать свойство„DefineIcon“неопределенных»

Я исследовал много, но ничего не получил. Пожалуйста, дайте мне несколько советов, чтобы исправить эту проблему.

Answer 1

Я думаю, вы должны импортировать JQuery:

import $ from 'jquery';