react-slick-元素类型无效:预期为字符串

时间:2018-12-31 12:26:11

标签: reactjs react-slick

我正在尝试创建一个简单的滑块,但是当我map数据时,而不是简单地将html添加到滑块中,却出现以下错误:

  

元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。您可能忘记了从定义文件中导出组件,或者可能混淆了默认导入和命名导入。

import React from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const WishAddImage = () => {
    const imgArray = [
        {
            src: 'https://www.reiss.com/media/product/653/024/20-1.jpg?format=jpeg&auto=webp&quality=85&width=250&height=287&fit=bounds'
        },
        {
            src: 'https://www.reiss.com/media/product/993/016/76-1.jpg?format=jpeg&auto=webp&quality=85&width=250&height=287&fit=bounds'
        }
    ];

    const sliderSettings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    };
    const wishImage = <Slider {...sliderSettings}>{imgArray.map(img => `<div><img src='${img.src}' /></div>`)}</Slider>;

    // const wishImage = ( /* <-- this works as it should when html used */
    //     <Slider {...sliderSettings}>
    //         <div>
    //             <h1>1</h1>
    //         </div>
    //         <div>
    //             <h1>2</h1>
    //         </div>
    //     </Slider>
    // );
    return <div>{wishImage}</div>;
};

export default WishAddImage;

我见过这些类似的问题,不适用于我:

  1. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  2. Uncaught Error: Element type is invalid: expected a string (for built-in components)
  3. Element type is invalid: expected a string (for built-in components) or a class/function

有什么明显的我想念的吗?

我正在使用react&react-dom v 16.6.3

1 个答案:

答案 0 :(得分:1)

删除引号中的字符:

 const wishImage = <Slider {...sliderSettings}>{imgArray.map(img => <div><img src={img.src} /></div>)}</Slider>;