Все библиотеки ползунков диапазона дают ошибочный тип элемента. Что еще я могу попробовать?

Question

Я хочу создать слайдер в своем проекте, и я использую библиотеку Reaction-RangeSlider. Я написал очень простую статью

const Slider = require('react-rangeslider');
var Para = React.createClass({
handleChange: function(value) {
        this.setState({
            value: value,
        });
    },
    render: function () {

        return (
            <Slider
        value={this.state.value}
        orientation="vertical"
        onChange={this.handleChange} />
        );
    }
});

, что приводит к ошибке

app.js:6873 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Para`.

Версия "react-rangeslider": "^2.2.0" Другие библиотеки, которые я пробовал, были mdbReact, ReactBootstrapSlider.

Я видел сообщения с похожей ошибкой, но все они импортируются по-другому.

Answer 1

Это известная проблема, библиотека не экспортирует по умолчанию должным образом, поэтому для импорта библиотеки вам нужно сделать:

const Slider = required('react-rangeslider').default;

Источник: https://github.com/whoisandy/react-rangeslider/issues/96

Answer 2

эта ошибка возникает при неправильном импорте компонента.

в случае использования экспорта по умолчанию:

// yourfile.js
const Component;
export default Component;

// anotherFile.js
import yourComponent form './yourfile';

в случаеВы используете именованный экспорт:

// yourfile.js
export const Component;

// anotherFile.js
import { Component } form './yourfile';