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

2023年4月8日 196次阅读

我有一个应用程序,我正在使用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混合起来并不是一个很好的做法,但我真的需要这个才能工作.如果有另一种方法可以让包装工作,我会很高兴作为答案.

否则,如果有人可以帮助我让它工作,将不胜感激！

更新:(还在看)

感谢所有的建议.我尝试了一堆,但他们都导致了问题：

>< ReactQuill>只是根本不显示,按钮是巨大的.
>< EditableDiv>给我：未捕获错误：addComponentAsRefTo(…)：只有ReactOwner可以有refs.
> Syam Mohan的回答告诉我：Uncaught TypeError：无法在f处读取未定义的属性’font-styles’

仍然在寻找可行的东西,感谢您迄今为止所做的一切努力！

最佳答案 添加和导入JQuery是第一部分.

1)使用webpack我看到的最好方法是在webpack.config.js中添加一个插件：

var webpack = require('webpack');

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

所有这些不同的拼写错误都是为了使JQuery可用性与各种模块兼容.
当然你需要npm安装jquery和你的插件(wysihtml5).

2)或者您可以在index.html中导入它：
< script src =“jquery-3.1.1.min.js”>< / script>

编辑：3)使用流星我做了流星添加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的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>
        )
    }
}
点赞