React Stratp Carousel与HTML，行和更多的内容

Question

我使用React与React带，我必须做一个旋转木马与行和div里面。在每张幻灯片中放入html内容的方法是什么?这是可能的反应带?

谢谢你的建议。

欢呼,亚历杭德罗

Answer 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 carousel的第一个示例https://reactstrap.github.io/components/carousel/

。

欢呼