Как отображать изображения в карусели Bootstrap с помощью React - PullRequest
Новая
       17

Как отображать изображения в карусели Bootstrap с помощью React

0 голосов
/ 04 июля 2019

Итак, у меня есть компонент (сообщения), в котором проходит цикл всех сообщений из базы данных. В компонент я «встроил» другой компонент (PostItem), поэтому мне не нужно создавать другой компонент для просмотра отдельных записей. Теперь внутри компонента PostItem у меня есть другой компонент с именем 'PostGallery'.

Это текущий код, который у меня есть в файле PostItem.js: 

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import PostGallery from '../posts/PostGallery';

const PostItem = ({
  post: { _id, text, name, files, avatar, user, likes, comments, date },
}) => (
    <article className={_id}>
      <Link to={`/posts/${_id}`}>
        <div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
          <div className="carousel-inner">
            {files.slice(0, 5).map((file, index) => (
              <PostGallery key={index} post={file} />
            ))}
          </div>
        </div>
      </Link>
    </article>
  );

PostItem.propTypes = {
  post: PropTypes.object.isRequired,
};

export default connect(
  null, null
)(PostItem);

При публикации записи пользователь может публиковать URL-адреса из изображений, разделенных запятой, что работает очень хорошо. Проблема возникает при отображении его во внешнем интерфейсе. Вот что у меня в компоненте PostGallery: 

import React from 'react';
import PropTypes from 'prop-types';

const PostGallery = ({
  post: { files }
}) => {
  return (
    <div className="">
      {post.files.length > 0 ? (
        post.files.map(file => (
          <img key={file} src={file} alt="" />
        ))) : (
          <p>No images found</p>
        )
      }

    </div>
  );
};

PostGallery.propTypes = {
  post: PropTypes.object.isRequired,
};

export default PostGallery;

Я считаю, что это должно быть легко, но почему-то это сейчас работает, и консоль не выдает мне ошибок, связанных с этим. Так что, если вы, ребята, можете помочь ...

Спасибо!

...