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

Question

У меня есть приложение, в котором я использую React. У меня сейчас проблема, когда я пытаюсь реализовать пакет https://github.com/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 не очень хорошая практика, но мне действительно нужно, чтобы это работало. Если есть альтернативный способ заставить пакет работать, я бы оценил это как ответ.

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

Обновление: (все еще смотрю)

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

1. <ReactQuill> просто не отображается хорошо, кнопки гигантские.
2. <EditableDiv> дает мне: Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs.
3. Ответ Сям Мохан дает мне: 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>

РЕДАКТИРОВАТЬ: 3) Используя метеор, я сделал meteor add jquery и это помогло.

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

Чтобы использовать плагин 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>
        )
    }
}

РЕДАКТИРОВАТЬ: Или использовать React's 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>
        )
    }
}

Answer 2

Попробуй это:

import React, { Component } from 'react';
import $ from 'jquery'; 

export class MyTextEditor extends Component {

  componentDidMount() {
    $(".textarea").wysihtml5()
  }

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

ПРИМЕЧАНИЕ: не забудьте добавить библиотеку JQuery