变量上的 reactstrap 轮播 html 标签

Question

大家好。我是 React 应用程序的新手，我将 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} />

p.s。你能不能也看看我的 "imageUrl" 有没有最好的方法来获取图像位置？起初我试过../images/imagename.jpg，就像我在导入js文件时所做的一样。但是好像找不到地址，所以我只是在构建时手动检查图像存储的位置。

提前致谢。

Answer 1

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

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

所以 captionHeader 和 captionText 需要是字符串。您如何为整个文本提供 font-weight css 样式。

关于图片的挑选你可以看看这个。

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>

变量上的 reactstrap 轮播 html 标签

reactstrap carousel html tag on variable

reactjs

reactstrap