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

如何将JQuery函数应用于React组件中的</code> ？ </p> <p> 我知道混合使用React和JQuery并不是一个很好的做法，但我真的需要这个才能工作。 如果有一种替代方法可以使程序包运行，我会很高兴作为答案。 </p> <p> 否则，如果有人可以帮我这个工作，将不胜感激！ </p> <p> <strong>更新:(</strong> <em>还在看）</em> </p> <p> 感谢所有的建议。 我尝试了一堆，但他们都导致了问题： </p> <ol> <li> <code></code>根本不能很好地显示，按钮是巨大的。 </li> <li> <code></code>给了我： <code>Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs.</code> </li> <li> Syam Mohan的回答给了我： <code>Uncaught TypeError: Cannot read property 'font-styles' of undefined at f</code> </li> </ol> <p> 仍然在寻找有用的东西，感谢你们迄今为止所做的一切努力！ </p> <!-- <ul></ul><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8401008596536068" data-ad-slot="7893885747"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> --> <div class="list-group"> <!-- You can start editing here. --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 添加和导入JQuery是<strong>第一部分</strong> 。 </p> <p> 1）使用<code>webpack</code>我看到的最好方法是在<code>webpack.config.js</code>添加一个插件： </p> <pre> <code>var webpack = require('webpack'); module.exports = { plugins: [ new webpack.ProvidePlugin({ '$': 'jquery', 'jQuery': 'jquery', 'window.jQuery': 'jquery' }) ] };</code> </pre> <p> 所有这些不同的拼写错误都是为了使JQuery可用性与各种模块兼容。 当然你需要<code>npm install</code> <code>jquery</code>和你的插件（ <code>wysihtml5</code> ）。 </p> <p> 2）或者您可以在<code>index.html</code>导入它： <code><script src="jquery-3.1.1.min.js"></script></code> </p> <p> 编辑：3）使用meteor我做了<code>meteor add jquery</code> ，并做了伎俩。 </p> <p> 然后， <strong>第二部分</strong>是在React中使用它。 </p> <p> 要在元素上使用jquery插件，首先需要将其渲染，这就是为什么需要将代码放在<code>componentDidMount</code> （在第一次渲染之后运行）的原因。 我建议你（基于我不同的搜索，当我必须做与你相同的事情，但使用<code>bootstrapTable</code> ）使渲染部分最简单（通过删除）并使用<code>ReactDOM.findDOMNode(this)</code>作为选择器JQuery的： </p> <pre> <code>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"> ) } }

编辑：或者使用React的refs

 import React, { Component } from 'react' export class MyTextEditor extends Component { componentDidMount() { $(this.refs.textareaIWantToUse).wysihtml5() } render() { return ( 
  
 ) } }