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函数应用于React组件中的<textarea>？

我知道混合使用React和JQuery并不是一个很好的做法，但我真的需要这个才能工作。如果有一种替代方法可以使程序包运行，我会很高兴作为答案。

否则，如果有人能帮我这个工作，我将不胜感激！

更新： （仍在寻找）

感谢所有建议。我尝过一堆但他们都导致了问题：

<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

试试这个：

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库

Answer 2

添加和导入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>

编辑：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＆＃39; 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>
        )
    }
}

将JQuery代码应用于组件内的元素

2 个答案: