时间戳

首页 > 解决方案 > 变量上的reactstrap轮播html标签

reactjs - 变量上的reactstrap轮播html标签

问题描述

祝大家有美好的一天。我是 react 应用程序的新手，我为我的轮播使用了 reactstrap。我刚刚从 reactstrap 文档中复制了代码。我想在 item 变量上添加一个 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} />

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

提前致谢。

标签： reactjsreactstrap

解决方案

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

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

您需要在本机 html 标记上放置以下类似属性的代码，以将它们存储在 html dom 中。

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

一个很好的例子可以在他们的 github repo 下的 demos 中找到。

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

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

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

然后他们将其渲染为轮播的孩子。因此，您只需将属性放在 html 上。使用 html 我可以创建一个像

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

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

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

推荐阅读