javascript - 图像数组 ReactJs 响应式轮播

Question

我刚刚开始使用网页。我正在尝试为反应响应轮播制作一个函数，以便我可以传递一组图像并根据图像的数量进行渲染，我一直在尝试运行这样的东西：

调用乐趣.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) 数组。Foreach 不会返回任何东西。正如 Talmacel 在评论中指出的那样，您也缺少一些括号。