Блог

Главная - Вопросы по программированию - Карусель React Stratp с HTML, строками и другим содержимым внутри

Карусель React Stratp с HTML, строками и другим содержимым внутри

#html #reactjs #carousel #rows #reactstrap

Вопрос:

Я использую React с ремнем react, я должен сделать карусель с рядами и разделами внутри. Как разместить html-контент внутри каждого слайда? Возможно ли это с помощью ремня react?

Спасибо за совет.

Твое здоровье, Алехандро

Комментарии:

1. Можете ли вы показать фрагмент кода того, что вы пробовали ? Вы можете использовать jsfiddle.net

2. Пожалуйста, предоставьте достаточно кода, чтобы другие могли лучше понять или воспроизвести проблему.

Ответ №1:

Вчера поздно вечером я попытался изменить код, и я мог бы вставить в них html, я не знаю, правильно ли это, но это работает. Вот код, который я сейчас использую.

     import React, { useState } from 'react';
    import {
      Carousel,
      CarouselItem,
      CarouselControl,
      CarouselIndicators
    } from 'reactstrap';

    const items = [
      {
        htmlContent: '<div class="row"><div class="col-sm-6" style="background-color:red;">Left</div><div class="col-sm-6" style="background-color:blue;">Right</div></div>'
      },
      {
        htmlContent: '<div class="row"><div class="col-sm-6" style="background-color:grey;">Left 2</div><div class="col-sm-6"style="background-color:green;">Right 2</div></div>'
      },
      {    
        htmlContent: '<div class="row"><div class="col-sm-6" style="background-color:orange;">Left 3</div><div class="col-sm-6"style="background-color:magenta;">Right 3</div></div>'
      }
    ];

    const HomeCarousel = (props) => {
      const [activeIndex, setActiveIndex] = useState(0);
      const [animating, setAnimating] = useState(false);

      const next = () => {
        if (animating) return;
        const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex   1;
        setActiveIndex(nextIndex);
      }

      const previous = () => {
        if (animating) return;
        const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
        setActiveIndex(nextIndex);
      }

      const goToIndex = (newIndex) => {
        if (animating) return;
        setActiveIndex(newIndex);
      }

      const slides = items.map((item) => {

        return (
          <CarouselItem
            onExiting={() => setAnimating(true)}
            onExited={() => setAnimating(false)}
          >
          <div dangerouslySetInnerHTML={{__html: item.htmlContent}} />
          </CarouselItem>
        );
      });

      return (
        <Carousel
          activeIndex={activeIndex}
          next={next}
          previous={previous}
        >
          <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} />
          {slides}
          <CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
          <CarouselControl direction="next" directionText="Next" onClickHandler={next} />
        </Carousel>
      );
    }

    export default HomeCarousel;

Я использую первый пример карусели reactstrap https://reactstrap.github.io/components/carousel/

Это работает.

Овации

Метки: ,