Implement application of jQuery code to an element inside a component

Question

I have an application in which I use React. I have a problem now when I try to implement the bootstrap-wysiwyg / bootstrap3-wysiwyg package .

In order for mine to <textarea>work as a text editor ootstrap-wysiwyg/bootstrap3-wysiwyg, I need to run the following jQuery function in a text editor:

$(".textarea").wysihtml5()

Here is my component:

import React, { Component } from 'react'

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

How can I apply this jQuery function to mine <textarea>in a React component?

I know that it is not a good practice to combine React and JQuery, but I really need this to work. If there is an alternative way to get the package to work, I would appreciate it instead of an answer.

Otherwise, if anyone can help me get this to work, it will be very helpful!

: ( )

. , :

• <ReactQuill> , .
• <EditableDiv> : Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs.
• Syam Mohan : 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 install jquery (wysihtml5).

2) index.html: <script src="jquery-3.1.1.min.js"></script>

EDIT: 3) meteor, 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>
        )
    }
}

EDIT: React 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