离子范围滑块没有显示答案

【问题标题】：ion-rangeslider not getting displayed离子范围滑块没有显示
【发布时间】：2017-11-04 15:59:28
【问题描述】：

我正在尝试在我的反应应用程序中使用 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。

我该如何解决这个完整的问题？

【问题讨论】：

看起来您在第一次尝试时错过了 CSS
我应该如何包含？
我已经下载了 ionslider 的 npm 包

标签： jquery reactjs jquery-plugins nouislider ion-range-slider

【解决方案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

【讨论】：

【解决方案2】：

需要在您的组件中将 css 导入如下：

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

【讨论】：