响应旋转木马的图像阵列

Question

我刚刚开始使用网页。我试图为旋转木马创建一个函数，这样我就可以传递一个图像数组，它根据图像的数量呈现，我一直试图运行这样的操作：

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;

我传递图像数组的方式有什么问题吗？还是必须使用呈现函数？

谢谢

Answer 1

您似乎使用的是array.forEach，而array.map操作将在这里执行。Map将转换您的数组并返回一个<div><Image src={element}/> </div> (ReactNodes)数组。不会归还任何东西。正如Talmacel在评论中指出的那样，您也缺少了一些括号。