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 不是很好的做法,但我确实需要这样做。如果有其他方法可以让程序包正常工作,我将不胜感激。
否则,如果有人能帮助我实现这一点,我将不胜感激!
更新: (还在找)
感谢所有建议。我尝试了很多,但都导致了问题:
<ReactQuill>
根本显示不好,按钮很大。
<EditableDiv>
给我:Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs.
- 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>
)
}
}
我有一个使用 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 不是很好的做法,但我确实需要这样做。如果有其他方法可以让程序包正常工作,我将不胜感激。
否则,如果有人能帮助我实现这一点,我将不胜感激!
更新: (还在找)
感谢所有建议。我尝试了很多,但都导致了问题:
<ReactQuill>
根本显示不好,按钮很大。<EditableDiv>
给我:Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs.
- 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>
)
}
}