我正在尝试创建一个简单的滑块,但是当我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;
我见过这些类似的问题,不适用于我:
有什么明显的我想念的吗?
我正在使用react&react-dom v 16.6.3
答案 0 :(得分:1)
删除引号中的字符:
const wishImage = <Slider {...sliderSettings}>{imgArray.map(img => <div><img src={img.src} /></div>)}</Slider>;