所有范围滑块库给出错误元素类型无效。我还能尝试什么？

Question

我想在我的项目中创建一个滑块，我正在使用 react-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

当您错误地导入组件时会发生此错误。

如果您使用默认导出：

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

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

如果您使用命名导出：

// yourfile.js
export const Component;

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

Answer 2

这是一个已知问题，库无法正确导出默认值，因此要导入库，您需要执行以下操作：

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

来源： https://github.com/whoisandy/react-rangeslider/issues/96

所有范围滑块库给出错误元素类型无效。我还能尝试什么？

All range slider libraries giving the error Element type invalid. What else can I try?

reactjs

slider

rangeslider

mdbreact