reactjs - IonRangeSlider 不显示

Question

我正在尝试在我的反应网站上使用react-ion-slider 。但它没有出现。

import IonRangeSlider from 'react-ion-slider';
import React, { Component, ReactNode } from 'react';


function Category() {
    return (
        <div className="category-page main_div">
            <IonRangeSlider type={'double'} min={0} max={150} from={0} to={150} step={1} />
        </div>
    );
}

export default Category;

输出：

But I want like this

Answer 1

而不是这个尝试 ion-rangeslider 来实现这个功能

npm i ion-rangeslider

有关详细信息，请访问https://www.npmjs.com/package/ion-rangeslider

Answer 2

通过使用 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>