将文本或描述添加到纯反应转盘的图像组件中

Question

向每个描述添加描述的合适方式是什么？目前我正在下面添加一个div，无法看到文本。

Answer 1

使用带有标记prop和isBgImage设置为true的Image组件。

<Slide index={i}>
<Image
tag='div'
isBgImage
src={someSrc}
>
<div className={descriptionClass}>Your description here</div>
</Image>
</Slide>

Answer 2

您可以使用包装器绕过该问题，而无需使用isBgImage或children原生道具。

1. 创建一个包装组件并使用包含文本的道具子项
2. 使用幻灯片组件中的包装器，将图像的源作为道具传递
3. 添加子内容
4. 使用位置属性来塑造孩子的风格

它看起来像这样：

import React from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext, Image } from 'pure-react-carousel';
const BackgroundImage = (props) => {
return (
<>
{props.children}
<Image src={props.img} />
</>
)
};
const childrenStyle = {
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)"
}; // to center the text for example
const Carousel = () => {
return(
<div className='home-banner'>
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={30}
totalSlides={4}
>
<Slider>
<Slide index={0}>
<BackgroundImage img={"your_image"} >
<div>Your children text</div>
</BackgroundImage>
</Slide>
// other slides here
</Slider>
<ButtonBack>Back</ButtonBack>
<ButtonNext>Next</ButtonNext>
</CarouselProvider>
</div>
)
};