我想在不同的轮播滑块上添加不同的文本以做出反应答案

【问题标题】：I want to add diffrent text on diffrent carousel slide in react我想在不同的轮播滑块上添加不同的文本以做出反应
【发布时间】：2021-06-06 04:59:21
【问题描述】：

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;

【问题讨论】：

您可以尝试格式化您的代码示例吗？很难阅读。

标签： javascript reactjs

【解决方案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

【讨论】：