Question

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

componentDidMount =（）=＆gt; {

    $("#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，它在那里工作。但是创造并没有使用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'

ion-rangeslider无法显示

2 个答案: