Question

对所有人来说，美好的一天。我是新的反应应用程序，我使用反应带为我的旋转木马。我刚刚从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} />

P.S。你可以检查我的＆＃34; imageUrl＆＃34;有没有最好的方法来获取图像位置？ atfirst我尝试../images/imagename.jpg，就像我导入js文件时所做的那样。但它似乎没有找到地址，所以我只是手动检查构建时图像的存储位置。

提前感谢。

Answer 1

你可以看到反应带文件中的道具类型是

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

因此captionHeader和captionText需要是字符串。你怎么能为这整篇文章赋予font-weight css风格。

关于图片的选择，您可以查看此SOF answer。

Answer 2

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

请注意，CarouselCaption不是html，它是自定义反应组件。 ;）

您需要将以下代码（如本机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>

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

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

变量上的reactstrap carousel html标签

2 个答案: