jquery - 离子范围滑块没有显示

Question

我正在尝试在我的反应应用程序中使用 ion-rangeslider。但它没有在网页上显示 ui。我正在像这样初始化我的 componentDidMount 方法

componentDidMount = () => {

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

但是在网页上它是这样显示的

应该是这样的

我也尝试在不使用 jquery 的情况下进行初始化

var slider = document.getElementById('ionSlider-newTag');

        ionRangeSlider.create(slider,{
            min: 0,
            max: 5000,
            type: 'double',
            postfix: 's',
            maxPostfix: "+",
            prettify: false,
            hasGrid: true,
            from: 1600,
            to: 2950
        });

但它给了我错误说

Uncaught TypeError: _ionRangeslider2.default.create is not a function

我用create来初始化noUiSlider，它在那里工作。但是 create 不适用于 ionrangeslider。

我怎样才能解决这个完整的问题？

Answer 1

使用 useEffect 生命周期添加脚本。这是示例：

import React, { Component, ReactNode, useEffect } from 'react';
import ionRangeSlider from 'react-ion-slider'
import $ from 'jquery';

function Category() {
    useEffect(() => {
        const script = document.createElement('script');
        script.innerHTML="$('#demo_1').ionRangeSlider({type: 'double',grid: true,min: 0,max: 1000,from: 200,to: 800,prefix: '$'})"
        document.body.appendChild(script);
        return () => {
            document.body.removeChild(script);
        }
    }, [])
    return (
        <div className="category-page main_div">
         <input type="text" className="js-range-slider" id="demo_1" />
        </div>
    );
}
export default Category;

如果仍然无法正常工作，请将这些 js 和 css 添加到您的 index.js 文件（位于根文件夹）中。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>

原始答案发布在这里：https ://stackoverflow.com/a/67124191/9208644

Answer 2

需要在您的组件中导入 css，如下所示：

import 'ion-rangeslider/css/ion.rangeSlider.min.css'