React Bootstrap：将幻灯片传递给 Bootstrap Carousel

如何解决React Bootstrap：将幻灯片传递给 Bootstrap Carousel

问题的关键：我能够渲染显示不同房屋的功能组件；但是，我无法单击房屋并打开模态并显示房屋的地址和幻灯片。地址显示在模态上，但不在幻灯片上。我对反应还很陌生。对不起，如果这是一个菜鸟问题。 properties.js 是一个对象数组，其中幻灯片是从给定路径导入的图像。

Projects.js

const handleShow = (address,slides) => {
    setAddress(address);
    setSlides(slides);
    setShow(true);
}

const Item = (props) => {
    return (
        <div onClick={() => handleShow(props.address,props.slides)} class='property'>
            <img src={props.image} />
        </div>
    )
}

const RenderProperties = () => {
    return properties.map(property => <Item onClick={handleShow} address={property.address} slides={property.images} image={property.images[0]}/>)
}

return (
    <>
        <Modal show={show} onHide={handleClose}>
            <Modal.Header closeButton>
                <Modal.Title>{address}</Modal.Title>
            </Modal.Header>
            <Modal.Body><CustomeCarousel slides={slides}/></Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={handleClose}>
                    Close
                </Button>
            </Modal.Footer>
        </Modal>

        <Container className='Container'>
            <img class="logo" src={logo}/>
            
            <NavBar/>
                <Row className="Row padding-50">
                    <Col className='Col projects' md={7}>
                        <h1>Projects</h1>
                        <hr/>
                        <RenderProperties/>
                    </Col>
                    <Col className='Col' md={5}>
                        <ContactForm/>
                    </Col>
                </Row>
        </Container>
    </>
)

properties.js

export default [
{
    id: 0,address: '130 Huron Ave Tampa Fl 33606',images: [
        slide1,slide2,slide3
    ],},{
    id: 1,address: '2311 South Louis Ave Tampa Fl 33629',images: [
        slide4,slide5,slide6
    ],{
    id: 2,address: '3122 W Knihts Ave Tampa Fl 33611',images: [
        slide7,slide8,slide9
    ],}

]

CustomeCarousel.js

const CustomeCarousel = (props) => {

const Item = (_props) => {
    const { image } = _props;
    return (
        <Carousel.Item>
            <img className="d-block w-100" src={image} />
            <Carousel.Caption className='Caption'>
                <h3>Slideshow view</h3>
            </Carousel.Caption>
        </Carousel.Item>
    )
}

const RenderSlides = () => {
    return props.slides.map(slide => <Item image={slide} />)
}

return (
    <Carousel className="Carousel">
        { props.slides != undefined ? <RenderSlides/> : null }
    </Carousel>
)

}