Reactstrap Carousel HTML 标签在变量上

Question

祝大家美好的一天。 我是反应应用程序的新手，我为我的轮播使用了Reactstrap。 我刚刚从 Reactstrap 文档中复制了代码。 我想在项目变量上添加一个 HTML 标签。 但只需在我的网站上打印 HTML 标签。 如何正确操作？

我的变量是：

const items = [
{
imageUrl: 'static/media/slide1.jpg',
idName: 'S1',
captionHeader: 'slide 1 <strong>text here</strong>',
captionText: 'slide 1 <strong>text here</strong>',
},
{
imageUrl: 'static/media/slide2.jpg',
idName: 'S2',
captionHeader: 'Slide 2',
captionText: 'Slide 2'
}
];

然后我在这里添加了它：

<CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={item.src}
>
<div className="carouselIMG" id={item.idName} style={{ backgroundImage: `url(${item.imageUrl})` }}>
&nbsp;
</div>
<CarouselCaption captionText={item.captionText} captionHeader={item.captionHeader} />
</CarouselItem>

这部分：

<CarouselCaption captionText={item.captionText} captionHeader={item.captionHeader} />

附言 你能检查一下我的"imageUrl"是否有最好的方法来抓取图像位置？起初我尝试了../images/imagename.jpg，就像我在导入 js 文件时所做的一样。但它似乎没有找到地址，所以我只是在构建时手动检查图像是否存储在哪里。

提前谢谢。

Answer 1

你可以看到在 react strap 文档中，道具类型是，

CarouselCaption.propTypes = {
captionHeader: PropTypes.string,
captionText: PropTypes.string.isRequired,
cssModule: PropTypes.object
};

所以captionHeader和captionText必须是字符串。你怎么能为整个文本提供font-weightcss风格。

关于图像的选择，您可以查看此 SOF 答案。

Answer 2

听起来您正在获取在用户视图中呈现的值，但您想要的是存储在 html 上的标记上的值。

请注意，CarouselCaption 不是 html，它是一个自定义的 react 组件。 ;)

您需要将以下代码(如属性(放在本机 html 标签上，以将它们存储在 html dom 中。

<div> captionText={item.captionText} captionHeader={item.captionHeader}> </div>

一个很好的例子可以在演示下的 github 存储库中找到。

https://github.com/gajus/react-carousel/blob/master/demo/src/index.js

在这里，您注意到他们使用map创建了一堆这样的数组。

<div key={String(index)}>{index}</div>;

然后他们将其渲染为旋转木马的子项。所以你只是把你的属性放在html上。使用 html，我可以创建一个类似的div

<div thisIsACustomHTMLAnAttribute="valuesToBeStoredInTheDom"> </div>

但是，自定义 react 组件中的等效项将尝试传递给组件以供使用或尝试将其呈现为值。

<div captionText={item.captionText}> </div>