[英]`react-slick` - type is invalid error
I am getting a Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
我收到了“
Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
error when tried to require 'react-slick` with webpack. 尝试在Webpack中要求“ react-slick”时出错。
const React = require("react");
const Slider = require("react-slick");
function MediaCarousel(props) {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return !props.stories ? null : <Slider>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</Slider>
}
exports.MediaCarousel = MediaCarousel;
It was fixed when tried with 尝试使用时已修复
const Slider = require("react-slick").default;
I suppose react-slick is not correctly exporting the module or my loader has some issue. 我想react-slick无法正确导出模块,或者我的加载器有问题。
尝试将设置传递给Slider组件:
<Slider {...settings} >
Two things you will need to add in your code
1. <Slider {...settings}>
2. module.exports = SimpleSlider;
below code is working for me, please find if it could help you:
import React from 'react';
import {render} from 'react-dom';
import Slider from 'react-slick';
require('./carousel.scss');
class SimpleSlider extends React.Component {
render() {
var settings = {
dots: true,
autoplay: true,
arrows: true
};
return (
<Slider {...settings}>
<div><img src='../../src/assets/1.jpg' /></div>
<div><img src='../../src/assets/2.jpg' /></div>
<div><img src='../../src/assets/3.jpg' /></div>
<div><img src='../../src/assets/4.jpg' /></div>
</Slider>
);
}
}
module.exports = SimpleSlider;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.