0

почему не работает

Данные:

let block1 = {
    src:'../images/carousel/1.jpeg',
    alt: 'First slide',
    captionTitle: 'First slide label',
    captionInfo: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
};

let block2 = {
    src:'../images/carousel/2.jpeg',
    alt: 'First slide',
    captionTitle: 'First slide label',
    captionInfo: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
};


export let carouselDATA = [block1, block2];

В App инициализировал и передал как свойство:

import { carouselDATA } from "./data/data";
<DemoCarousel data={ carouselDATA }/>

Сама карусель:

const DemoCarousel = () => {

    return (
        <Carousel style={carouselStyles} fade={true}>
            {this.data.map(block => (
                <Carousel.Item>
                    <img
                        className="d-block w-100"
                        src={block.src}
                        alt={block.alt}
                        height="500px"
                    />
                    <Carousel.Caption>
                        <h3>{block.captionTitle}</h3>
                        <p>{block.captionInfo}</p>
                    </Carousel.Caption>
                </Carousel.Item>
            ))}
            };
        </Carousel>
    );
};

export default DemoCarousel;

1 ответ 1

0

Похоже, вы недавно переделали компонент-класс в компонент-функцию. Добавьте в DemoCarousel параметр props и замените this.data на props.data:

const DemoCarousel = (props) => {

  return (
    <Carousel style={carouselStyles} fade={true}>
        {props.data.map(block => (
            <Carousel.Item>
                <img
                    className="d-block w-100"
                    src={block.src}
                    alt={block.alt}
                    height="500px"
                />
                <Carousel.Caption>
                    <h3>{block.captionTitle}</h3>
                    <p>{block.captionInfo}</p>
                </Carousel.Caption>
            </Carousel.Item>
        ))}
        };
    </Carousel>
  );
};

export default DemoCarousel;
2
  • Все Ок. Еще вопрос, почему фото не подгужается?
    – Slavick
    Commented 5 окт. 2019 в 14:34
  • Это надо инспектором в браузере смотреть, какой у Вас в результате путь к картинке получается. Относительная адресация может сбиться при перемещении кода из папки в паку.
    – Spatz
    Commented 5 окт. 2019 в 16:25

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.