图像阵列 ReactJs 响应式轮播

Question

I am just getting started with web pages. I am trying to make a function for the react responsive carousel so I can pass an array of images and it renders depending on the number of images, I've been trying to run something like this:

Callingfun.js

import React from 'react';

import Carouselfun from '../components/Carouselfun'

import webs from '../assets/images/proj/website.JPG'
import webs1 from '../assets/images/proj/website1.JPG'
import webs2 from '../assets/images/proj/website2.JPG'


const imagess= [webs,webs1,webs2];

function WebsitePage(props) {
    return(
        <div className="g-background-pages">
            
            <Carouselfun   
                        imag={imagess}
                        />
        </div>
    );

}

export default WebsitePage;

Carouselfun.js

import React from 'react';
import {Jumbotron, Container, Row, Col, Image} from 'react-bootstrap';

import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';


function carouselfun(props){
    
    return(
        <Jumbotron>
            <Container>
                 <Row>
                    <div>
                        <div>        
                            <Carousel>
                             
                            {props.imag}.forEach(element => {
                                <div>
                                <Image src= element/>
                                </div>
                            });
                                
                            </Carousel>         
                        </div>
                    </div>
                </Row>
            </Container>
        </Jumbotron>
    )
}

export default carouselfun;

Is there something wrong in the way I am passing my arrays of Images? or does it have to be with the render function?

Thank you

Answer 1

It seems that you are using array.forEach, where a array.map operation will do instead. Map will transform your array and return an array of <div><Image src={element}/> </div> (ReactNodes). Foreach wont return anything. As Talmacel notes in the comment you were missing some brackets too.