使用外部库时无法循环元素:类型“”Element[]“”不能赋值给类型“string”“

Question

我正在尝试使用反应响应式caroussel。当手动添加我的图像时，它没有问题，但当通过photos.map添加它们时，它不再工作，并且我得到了这个错误：

类型“Element[]”不能赋值给类型“string”

有什么想法吗？

import * as React from 'react';
import { Carousel } from 'react-responsive-carousel';
import "react-responsive-carousel/lib/styles/carousel.min.css"

interface Props {
  photos?: string[];
}
const Caroussel = ({
    photos = ["test1.png", "test2.png"]
  }: Props): JSX.Element => {
  return (
    <Carousel>
                                            //THIS DOESN'T WORK
        {photos.map((image) => (
          <div>
            <img src={image} />
          </div>
        ))}

                                            //THIS WORKS
        <div>
            <img src="test.png" />
        </div>
        <div>
            <img src="test2.png" />
        </div>
    </Carousel>
  );
};

export default Caroussel;

Answer 1

您只需要将其封装到Reqct.Fragment中：

import * as React from 'react';
import { Carousel } from 'react-responsive-carousel';
import "react-responsive-carousel/lib/styles/carousel.min.css"

interface Props {
  photos?: string[];
}
const Caroussel = ({
  photos = ["test1.png", "test2.png"]
}: Props): JSX.Element => {
  return (
    <Carousel>
// Wrap it into React Fragment
      <>{photos.map((image) => (
        <div>
          <img src={image} />
        </div>
      ))}</>


      <div>
        <img src="test.png" />
      </div>
      <div>
        <img src="test2.png" />
      </div>
    </Carousel>
  );
};

export default Caroussel;

我相信这是因为Carousel需要React.ReactChild[];类型，而Array.prototype.map返回JSX.Element[]。这些类型不兼容。

不知道他们为什么这么做。AFAIK，则子项应类型化为React.ReactNode。如果我说错了，请纠正我。

React.Fragment不会影响你的超文本标记语言