组件不会渲染答案

【问题标题】：Component wont render组件不会渲染
【发布时间】：2019-01-01 03:23:30
【问题描述】：

我将一组对象传递给TileFeed，并取出用于页面上每个图块的缩略图 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>
    );
  }

【问题讨论】：

标签： javascript css html reactjs components

【解决方案1】：

您没有从提供给 map 的函数中返回 JSX。添加return语句或删除函数体{}，使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>
      );
    });
  }
}

【讨论】：