我想在react中的不同转盘幻灯片上添加不同的文本

Question

import React from 'react';
import Carousel from 'react-bootstrap/Carousel'
import carouselStyles from './Carousel.module.css'
var imagees=[
{id:"12",src:"https://images.unsplash.com/photo-1524514587686-e2909d726e9b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"},
{id:"321",src:"https://images.unsplash.com/photo-1531053326607-9d349096d887?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"},
{id:"421",src:"https://images.unsplash.com/photo-1542042953945-ddfcee22a1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"},
{id:"1232",src:"https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"},
]
function CarouselComp(props) {
return (
<div>
<Carousel interval={10000} keyboard={false} >
{
imagees.map(imgs=>(  <Carousel.Item style={{ 'height': "650px" }} >
<img style={{ 'height': "650px" }} className="d-block w-100" src={imgs.src} />
<Carousel.Caption>
<h3 className={carouselStyles.mainHeading1}>Lorem Ipsum</h3>
<h3 className={carouselStyles.mainHeading2}>First Slide</h3>
<p className={carouselStyles.mainHeading3}>Lorem ipsum dolor sit amet</p>
<p className={carouselStyles.mainHeading4}> consecteture</p>
</Carousel.Caption>
</Carousel.Item>))
}

</Carousel>
</div>

);
}
export default CarouselComp;

Answer 1

以下是向每个滑块添加文本的方法

import React, { useState } from 'react';
import Carousel from 'react-bootstrap/Carousel'
import 'bootstrap/dist/css/bootstrap.css';

function App() {
const imagees = [
{ id: "12", title: "First slide label", subTitle: "Nulla vitae elit libero, a pharetra augue mollis interdum.", src: "https://images.unsplash.com/photo-1524514587686-e2909d726e9b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" },
{ id: "321", title: "Second slide label", subTitle: "Nulla vitae elit libero, a pharetra augue mollis interdum.", src: "https://images.unsplash.com/photo-1531053326607-9d349096d887?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80" },
{ id: "421", title: "Third slide label", subTitle: "Nulla vitae elit libero, a pharetra augue mollis interdum.", src: "https://images.unsplash.com/photo-1542042953945-ddfcee22a1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" },
{ id: "1232", title: "Fourth slide label", subTitle: "Nulla vitae elit libero, a pharetra augue mollis interdum.", src: "https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80" },
]

return (
<>
<Carousel interval={10000} keyboard={false}>
{imagees.map((imgs, key) => (
<Carousel.Item key={key} style={{ maxHeight: "650px" }}>
<img
className="d-block w-100"
src={imgs.src}
alt={imgs.title}
/>
<Carousel.Caption>
<h3>{imgs.title}</h3>
<p>{imgs.subTitle}</p>
</Carousel.Caption>
</Carousel.Item>))}
</Carousel>
</>
);
}
export default App;

参考编号：https://codesandbox.io/s/exciting-sunset-62uok?file=/src/App.js:0-1861