reactjs - Kan inte loopa element när man använder ett externt bibliotek: Typ 'Element[]' kan inte tilldelas typen 'string'

Jag försöker använda react-responsive carousel. När jag lägger till mina bilder manuellt fungerar det utan problem, men när jag lägger till dem via photos.map fungerar det inte längre och jag får detta fel:

Typen 'Element[]' kan inte tilldelas typen 'string'

Några idéer här?

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;

Svar #1

Du behöver bara omsluta det i React.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;

Jag tror att detta beror på att Carousel förväntar sig typen React.ReactChild[]; men Array.prototype.map returnerar JSX.Element[]. Dessa typer är inkompatibla.

Vet inte varför de gjorde det. Så vitt jag vet bör barn typas som React.ReactNode. Vänligen rätta mig om jag har fel.

React.Fragment påverkar inte din HTML