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

React applying JQuery code to an element inside a component

我有一个使用 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>
        )
    }
}

如何在 React 组件中将 JQuery 函数应用到我的 <textarea>

我知道混合 React 和 JQuery 不是很好的做法,但我确实需要这样做。如果有其他方法可以让程序包正常工作,我将不胜感激。

否则,如果有人能帮助我实现这一点,我将不胜感激!

更新: (还在找)

感谢所有建议。我尝试了很多,但都导致了问题:

  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

仍在寻找有用的东西,感谢您迄今为止所做的所有努力!

试试这个:

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库

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