html-тег карусели реактивной ленты на переменную - PullRequest
Новая
       10

html-тег карусели реактивной ленты на переменную

0 голосов
/ 06 июня 2018

добрый день всем.Я новичок в реагировании приложения, и я использую реагирующий ремень для моей каруселия только что скопировал код из документации поactstrap.и я хочу добавить 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.но, похоже, он не расположен по адресу, поэтому я просто вручную проверяю, где хранятся изображения при сборке.

заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 06 июня 2018

Звучит так, как будто вы получаете значения, отображаемые в пользовательском представлении, но вам нужны значения, хранящиеся в теге в 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

Здесь вы заметили, что они создают массив из множества этих объектов, используя карту. 

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

Затем они рендерит этов детстве от карусели.Таким образом, вы просто поместите свои атрибуты в HTML.С помощью html я могу создать div как 

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

Однако эквивалент в пользовательском компоненте реакции будет пытаться либо передать компоненту для использования, либо попытаться отобразить его как значения. 

<div captionText={item.captionText}> </div>
0 голосов
/ 06 июня 2018

Вы можете видеть, что в документации по реактивным ремешкам типы реквизитов: 

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

Так что captionHeader и captionText должны быть строками.Как бы то ни было, вы можете дать font-weight стиль CSS для всего этого текста.

А что касается выбора изображений, вы можете проверить этот SOF ответ .

...