javascript - 组件不会渲染

Question

我正在将一组对象传递给 TileFeed 并取出用于页面上每个图 block 的缩略图 URL。正在提取 URL，但由于某种原因未呈现实际磁贴。当我用控制台输出 thumb.thumbnail 时，我得到了正确的输出。

class TileFeed extends Component {
  render() {
    const { thumbnail } = this.props;
    return thumbnail.map(thumb => {
      console.log(thumb.thumbnail);
      <div key={thumb._id} className="row__inner">
        <div className="tile">
          <div className="tile__media">
            <img
              className="tile__img"
              id="thumbnail"
              src={thumb.thumbnail}
              alt=""
            />
          </div>
        </div>
      </div>;
    });
  }
}

调用 TileFeed 的类

render() {
    const { videos, loading, key } = this.props.videos;
    let videoContent;
    if (videos === null || loading) {
      videoContent = <Spinner />;
    } else {
      videoContent = <TileFeed thumbnail={videos} />;
    }
    console.log({ videoContent });

    return (
      <div className="explore">
        <div className="row">{videoContent} </div>
      </div>
    );
  }

Answer 1

您没有从给定 map 的函数返回 JSX。添加 return 语句或删除函数体 {} 以使返回隐式。

class TileFeed extends Component {
  render() {
    const { thumbnail } = this.props;
    return thumbnail.map(thumb => {
      return (
        <div key={thumb._id} className="row__inner">
          <div className="tile">
            <div className="tile__media">
              <img
                className="tile__img"
                id="thumbnail"
                src={thumb.thumbnail}
                alt=""
              />
            </div>
          </div>
        </div>
      );
    });
  }
}