Question

我正在尝试在我的反应应用程序中使用第三方插件，如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为tagsinput

<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

我在反应组件中导入了插件

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

Answer 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

Answer 2

以facebook为例：

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

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

在componentDidMount（）中：

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

或

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

对我有用

使用第三方库，反应js给出错误

2 个答案: