Реагировать на использование кода JQuery для элемента внутри компонента

Question

У меня есть приложение, в котором я использую React. У меня проблема сейчас, когда я пытаюсь реализовать пакет bootstrap-wysiwyg/bootstrap3-wysiwyg.

Для того, чтобы получить мой <textarea> работать как ootstrap-wysiwyg/bootstrap3-wysiwyg текстовый редактор, мне нужно выполнить следующую функцию JQuery в текстовом редакторе:

$(".textarea").wysihtml5() 

Вот мой компонент:

import React, { Component } from 'react' 

export class MyTextEditor extends Component { 
    render() { 
     return (
      <div className="form-group"> 
       <textarea className="textarea"></textarea> 
      </div> 
     ) 
    } 
} 

Как может Я применяю эту функцию JQuery к моему <textarea> в компоненте React?

Я знаю, что не очень хорошая практика сочетать React и JQuery, но мне действительно нужно это работать. Если есть альтернативный метод получения пакета для работы, я был бы признателен за это вместо ответа.

В противном случае, если кто-нибудь может помочь мне заставить это работать, он будет очень признателен!

Update:(Все еще ищете)

Спасибо за все предложения. Я пробовал кучу, но они все это привело к проблемам:

1. <ReactQuill> просто не отображается хорошо на всех, кнопки гигантские.
2. <EditableDiv> дает мне: ответ Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs.
3. Syam Мохана дает мне: Uncaught TypeError: Cannot read property 'font-styles' of undefined at f

еще в поисках чего-то, что будет работать, спасибо за все усилия, до сих пор!

Answer 1

Для добавления и импорт JQuery является первой частью.

1) Использование webpack лучший способ я видел в том, чтобы добавить плагин в вашем webpack.config.js:

var webpack = require('webpack'); 

module.exports = { 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      '$': 'jquery', 
      'jQuery': 'jquery', 
      'window.jQuery': 'jquery' 
     }) 
    ] 
}; 

Все эти различные опечаток здесь, чтобы наличие JQuery совместим со всеми видами модулей. Конечно, вам нужно npm installjquery и ваш плагин (wysihtml5).

2) Или вы можете импортировать его в вашем index.html: <script src="jquery-3.1.1.min.js"></script>

EDIT: 3) Использование метеора я сделал meteor add jquery и что сделал трюк.

Затем Вторая часть - использовать его в реактиве.

Чтобы использовать плагин jquery для элемента, который вам нужно его визуализировать первым, вот почему вам нужно поместить код в componentDidMount (который запускается после первого рендера). И я бы посоветовал (основываясь на моем другом поиске, когда мне приходилось делать то же самое, что и вы, но с bootstrapTable), чтобы сделать часть рендеринга самой простой (путем удаления) и использовать ReactDOM.findDOMNode(this) в качестве селектора для JQuery:

import React, { Component } from 'react' 
import ReactDOM from 'react-dom' 

export class MyTextEditor extends Component { 

    componentDidMount() { 
     $(ReactDOM.findDOMNode(this)).wysihtml5() 
    } 

    render() { 
     return (
      <textarea className="textarea"></textarea> 
     ) 
    } 
} 

EDIT: Или использовать РЕАКТ refs

import React, { Component } from 'react' 

export class MyTextEditor extends Component { 

    componentDidMount() { 
     $(this.refs.textareaIWantToUse).wysihtml5() 
    } 

    render() { 
     return (
      <div className="form-group"> 
       <textarea className="textarea" ref="textareaIWantToUse"></textarea> 
      </div> 
     ) 
    } 
}