Reactjs 仅当图像存在时才显示旋转木马

我想这是一个相当简单的问题，但由于我是新的反应，我有一些困难。我只想在旋转木马中显示存在的图像，否则，我不会在屏幕上显示任何内容。 当前使用“我的代码”时，会显示图像，但当存在不存在的图像时，旋转木马的新选项卡将显示为空白。 如果没有图像，有没有办法简单地取消旋转木马

我的代码：

          <div>
            <Carousel>
                {images[0]?(<CarouselModel image={images[0]} />):null}
                {images[1]?(<CarouselModel image={images[1]} />):null}
                {images[2]?(<CarouselModel image={images[2]} />):null}
                {images[3]?(<CarouselModel image={images[3]} />):null}
                {images[4]?(<CarouselModel image={images[4]} />):null}
                {images[5]?(<CarouselModel image={images[5]} />):null}
                {images[6]?(<CarouselModel image={images[6]} />):null}

              
            
            </Carousel>
        </div>
       

{images[0]？（）：null}
{images[1]？（）：null}
{images[2]？（）：null}
{images[3]？（）：null}
{images[4]？（）：null}
{images[5]？（）：null}
{images[6]？（）：null}

然后，我的旋转木马显示如下：

获取图像-我知道这有点混乱，但我稍后会改进它，只是为了测试

const displayInteriorImages = () => {
    let images 
    let images2 
    let images3 
    let images4 
    let images5 
    let images6 

images=(
        <div  className='itemWrapper' >
            <div className='item'id="item">
                {
                    listing.photo_1 ? (
                        <div className='listingdetail__display'>
                            <img className='listingdetail__display__image' src={listing.photo_1} alt='' />
                        </div>
                    ) : null
                }
            </div>
        </div>
    );
    images2=(
        <div  className='itemWrapper' >
            <div className='item'id="item">
                {
                    listing.photo_2 ? (
                        <div className='listingdetail__display'>
                            <img className='listingdetail__display__image' src={listing.photo_2} alt='' />
                        </div>
                    ) : null
                }
            </div>
        </div>
    );

    images3=(
        <div  className='itemWrapper' >
            <div className='item'id="item">
                {
                    listing.photo_3 ? (
                        <div className='listingdetail__display'>
                            <img className='listingdetail__display__image' src={listing.photo_3} alt='' />
                        </div>
                    ) : null
                }
            </div>
        </div>
    );

    images4=(
        <div  className='itemWrapper' >
            <div className='item'id="item">
                {
                    listing.photo_4 ? (
                        <div className='listingdetail__display'>
                            <img className='listingdetail__display__image' src={listing.photo_4} alt='' />
                        </div>
                    ) : null
                }
            </div>
        </div>
    );

    images5=(
        <div  className='itemWrapper' >
            <div className='item'id="item">
                {
                    listing.photo_5 ? (
                        <div className='listingdetail__display'>
                            <img className='listingdetail__display__image' src={listing.photo_5} alt='' />
                        </div>
                    ) : null
                }
            </div>
        </div>
    );

    images6=(
        <div  className='itemWrapper' >
            <div className='item'id="item">
                {
                    listing.photo_6 ? (
                        <div className='listingdetail__display'>
                            <img className='listingdetail__display__image' src={listing.photo_6} alt='' />
                        </div>
                    ) : null
                }
            </div>
        </div>
    );
       return [images, images2,images3,images4,images5,images6];
};


let images =displayInteriorImages()

const displayiorimages=（）=>{
让图像
让图像2
让我们看看图像3
让图像4
让我们想象一下5
让我们想象6
图像=(
{
清单1.photo_1(
)：null
}
);
图像2=(
{
清单1.photo_2(
)：null
}
);
图像3=(
{
清单1.photo_3(
)：null
}
);
图像4=(
{
清单4.photo_(
)：null
}
);
图像5=(
{
清单5.photo_5(
)：null
}
);
图像6=(
{
清单6.photo_6(
)：null
}
);
返回[图像，图像2，图像3，图像4，图像5，图像6]；
};
让图像=显示内部图像（）

使用map，使其仅为数组中的项目创建

旋转木马模型。但要确保数组不包含假值

<div>
     <Carousel>
        {
         images.map(img => (<CarouselModel image={img}/>))
        }
    </Carousel>
</div>


{
images.map（img=>（））
}
您可以先筛选数组，然后使用map返回组件数组：

<Carousel>
  // if the image is null or undefined it will be rejected
  {images.filter(img => img).map(img => <CarouselModel image={img}>)}
</Carousel>


//如果图像为空或未定义，则将拒绝该图像
{images.filter（img=>img.map（img=>）}
谢谢，就这样。这也是缩小代码范围的好方法。谢谢你的回复，这对我帮助很大