Question

因此，我有一个组件（帖子），其中循环遍历数据库中的所有帖子。在组件中，我“嵌入”了另一个组件（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;

我认为这应该很容易，但是以某种方式它现在可以正常工作，并且在控制台上也不会困扰我任何与此相关的错误。所以，如果你们可以帮助...

谢谢！

如何使用React在Bootstrap轮播中显示图像

0 个答案: