反应将JQuery代码应用于组件内部的元素 [英] React applying JQuery code to an element inside a component

问题描述

我有一个使用React的应用程序.我现在在尝试实现

I have an application where I'm using React. I have a problem now where I'm trying to implement the bootstrap-wysiwyg/bootstrap3-wysiwyg package.

为了使我的<textarea>用作ootstrap-wysiwyg/bootstrap3-wysiwyg文本编辑器，我需要在文本编辑器上运行以下JQuery函数:

In order to get my <textarea> to work as the ootstrap-wysiwyg/bootstrap3-wysiwyg text editor I need to run the following JQuery function on the text editor:

$(".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>?

How can I apply that JQuery function to my <textarea> in the React component?

我知道混合React和JQuery不是很好的做法，但是我确实需要它来工作.如果有其他方法可以使程序包正常工作，那么我希望能将其作为解决方法.

I know it's not very good practice to blend React and JQuery but I really need this to work. If there is an alternative method to getting the package to work I would appreciate that as an answer instead.

否则，如果有人可以帮助我使其正常工作，将不胜感激！

Otherwise if anyone can help me get this to work it would be much appreciated!

更新:(仍在看)

感谢所有建议.我尝试了很多，但是它们都导致了问题:

Thanks for all the suggestions. I've tried a bunch but they've all led to problems:

1. <ReactQuill>根本无法很好地显示，按钮是巨大的.
2. <EditableDiv>给了我:Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs.
3. Syam Mohan的回答给了我:Uncaught TypeError: Cannot read property 'font-styles' of undefined at f

1. <ReactQuill> just doesn't display well at all, buttons are gigantic.
2. <EditableDiv> gives me: Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs.
3. Syam Mohan's answer gives me: Uncaught TypeError: Cannot read property 'font-styles' of undefined at f

仍在寻找能解决问题的方法，感谢您到目前为止所做的一切努力！

Still in search for something that will work, thank you for all the efforts so far!

推荐答案

添加和导入JQuery是第一部分.

To add and import JQuery is the first part.

1)使用webpack最好的方法是在webpack.config.js中添加插件:

1) Using webpack the best way I saw was to add a plugin in your webpack.config.js:

var webpack = require('webpack');

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

所有这些不同的拼写都是为了使JQuery可用性与所有类型的模块兼容. 当然，您需要npm install jquery和您的插件(wysihtml5).

All these different typos are here to make JQuery availability compatible with all kinds of modules. Of course you need to npm install jquery and your plugin (wysihtml5).

2)或者您可以将其导入到index.html中: <script src="jquery-3.1.1.min.js"></script>

2) Or you could import it in your index.html: <script src="jquery-3.1.1.min.js"></script>

3)我使用流星做了meteor add jquery，并且成功了.

3) Using meteor I did meteor add jquery and that did the trick.

然后，第二部分是在React中使用它.

Then, second part is to use it in React.

要在元素上使用jquery插件，您需要首先对其进行渲染，这就是为什么需要将代码放入componentDidMount(在第一次渲染之后运行)的原因. 并且我建议您(基于与我不同的搜索，当我不得不做与您相同的事情，但是要使用bootstrapTable)使呈现部分最简单(通过删除)并使用ReactDOM.findDOMNode(this)作为JQuery的选择器:

To use a jquery plugin on an element you need it to be rendered first, that's why you need to put the code in componentDidMount (which is run after the first render). And I would advise you (based on my different search when I had to do the same thing as you but with bootstrapTable) to make the render part the most simple (by removing ) and to use ReactDOM.findDOMNode(this) as a selector for 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的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代码应用于组件内部的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！