使用带有 react js 的第三方库给出错误答案

【问题标题】：Using third party library with react js giving error使用带有 react js 的第三方库给出错误
【发布时间】：2018-08-26 18:15:59
【问题描述】：

我正在尝试在我的反应应用程序中使用第三方插件，例如 bootstrap-tagsinout 和 noUiSlider。我已经通过 npm 将库安装到我的 package.json 中。目前我正在我的 componentDidMount 方法中初始化插件。我就是这样做的

componentDidMount = () => {

        $(document).ready(function() {
            // Apply the plugin to the element
            $("#ionSlider-newTag").ionRangeSlider({
                min: 0,
                max: 5000,
                type: 'double',
                postfix: 's',
                maxPostfix: "+",
                prettify: false,
                hasGrid: true,
                from: 1600,
                to: 2950
            });
        });

        $(document).ready(function() {
            $('#tagsinput').tagsinput({
                typeahead: {
                    source: ['Smoking, Drinking, Eating']
                }
            });
        });

        $(document).ready(function() {
            // Apply the plugin to the element
            $("#noUiSlider").noUiSlider({
                start: 40,
                connect: "lower",
                range: {
                    'min': 0,
                    'max': 100
                }
            });
        });

这是我的标签输入 div

<div className="form-group form-group-default">
                                        <label>Tags</label>
                                        <input id="#tagsinput" type="text" value="Smoking,Drinking" data-role="tagsinput"/>
                                    </div>

当我运行它时，我得到一个错误提示

index.js:121 Uncaught TypeError: $(...).tagsinput is not a function

和

index.js:121 Uncaught TypeError: $(...).noUiSlider is not a function

我在我的 react 组件中导入了插件

import 'ion-rangeslider'
import 'bootstrap-tagsinput'
import 'nouislider'
import $ from 'jquery'

我已经查找了所有已经存在的问题并尝试了它们。但没有任何效果。我做错了什么？

更新

我尝试使用 refs，但没有帮助

 <input id="#tagsinput" type="text"  ref={(input) => {textInput = input; }}  value="Smoking,Drinking" data-role="tagsinput"/>

textInput.tagsinput({
                typeahead: {
                    source: ['Smoking, Drinking, Eating']
                }
            });

但是我收到了这个错误

Uncaught TypeError: Cannot read property 'tagsinput' of undefined

【问题讨论】：

标签： javascript reactjs twitter-bootstrap-3 nouislider bootstrap-tags-input

【解决方案1】：

不建议在 React 组件中使用 jQuery，因为 React 处理虚拟 DOM 和差异的方式。简而言之，React 跟踪 DOM 中的元素，并在适当和高效时添加/删除/更新它们。因此，您使用 jQuery 查找的元素可能尚不存在于 DOM 中。此外，$(document).ready... 包装器在组件安装之前不会运行，因此文档ready 事件可能在 jQuery 运行之前触发。

您需要考虑使用 React refs 来访问 React 中的 DOM 元素：https://facebook.github.io/react/docs/refs-and-the-dom.html

【讨论】：

请查看我的问题中添加的更新。那没用:(
使用 ref:ref={ (input) => {this.textInput = input} } 时，您需要将输入附加到组件。然后，您可以使用 this.textInput 引用 DOM 节点。请注意，由于原始答案中所述的原因，它不一定会让您访问 jQuery 方法。
我使用了 this.textInput，但它没有引用 textInput 变量。当我只使用 textInput 时，它开始引用变量。奇怪的。但是你能告诉我在 react 中使用这个插件的最佳方式吗？

【解决方案2】：

从 facebook 示例：

constructor(props) {
  super(props);
  ...
  this.myRef = React.createRef();
}

在渲染（）中： return <input ref={this.myRef} ...

在componentDidMount()中：

this.myRef.current.someEvent = this.eventHandler;

或者

this.myRef.current.tagsinput({ ...

对我有用

【讨论】：