Question

我是新手做出反应，我想在反应网页中显示图像数组。该阵列具有统计数量的图像。

render: function() {
    console.log("edit");
    return (
        <div>
            <Button bsStyle="info" id="qslist" onClick={this.show}>View</Button>
            <Button bsStyle="info" id="qslist" className="delete" onClick={this.handleDelete}>Delete</Button>
            <Button bsStyle="info" id="qslist" className="disable" onClick={this.handleDisable}>Disable</Button>
            <Modal show={this.state.showModal} onHide={this.close}>
                <Modal.Header closeButton>
                    <Modal.Title></Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <div id="formdata1">Name:<b>{name}</b></div>
                    <div id="formdata1">User:<b>{user}</b></div>
                    <div id="formdata1">Radius:<b>{radius}</b></div>
                    <div id="formdata1">Status:<b>{status}</b></div>
                    <div id="formdata1">Type:<b>{type}</b></div>
                    <div id="formdata1">Latitude:<b>{lat}</b></div>
                    <div id="formdata1">Longitude:<b>{long}</b></div>
                    <div id="formdata1">Description:<b>{caption}</b></div>
                    <div id="formdata1">Schedule:<b>{schedule}</b></div>
                    <div id="formdata1">Duration:<b>{duration}</b></div>
                    <div id="formdata1">lshare:<b>{lshare}</b></div>
                    <div id="formdata1">Id:<b>{listingid}</b></div>
                    <Image src={imgs} rounded />
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={this.close} bsStyle="info" id="solbutton">Close</Button>
                </Modal.Footer>
            </Modal>
        </div>
    );
}

在上面的图像代码中我试图显示图像数组。目前，只能显示一个图像<Image src={image} rounded/>。如何显示多个图像。数组图像在

中

[
    'http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg', 
    'http://wallpaper-gallery.net/images/image/image-13.jpg',
    ...
]

Answer 1

如果您只想显示图像数组（无论出于何种原因），您可以执行以下操作：

在render方法的开头（控制台日志旁边）添加：

var images = imgs.map(function(image) {
 return (<Image src={image} rounded />);
});

这会将您的路径数组映射到一个Image组件数组（其中imgs是您指定的路径数组）。

然后，替换

<Image src={imgs} rounded/>

使用

{images}

就是这样。

如果您需要某种旋转木马，可以使用许多包（example），您可以在其中定义如下内容：

<ImageGallery items={imgs} />

反应显示图像数组？

1 个答案: