组件不会渲染

Question

我正在将对象数组传递给TileFeed，并且正在提取缩略图URL，以用于页面上的每个图块。正在提取URLS，但是由于某种原因，实际的图块未呈现。当我调出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>
      );
    });
  }
}