javascript - 如何在 react-masonry-css 无限滚动中注入元素？

Question

我有一个带有 3 个砖石柱的反应网站。我需要帮助每 3 个帖子注入一个元素。我想在我的网站上添加广告，所以我需要每隔几个帖子向他们展示一次。

class PostsLoader extends Component {
  constructor(props) {
    super(props);

    this.state = {
      fetchingData: true,
      posts: [],
      shouldLoad: false,
      innerWidth: window.innerWidth,
      hasMorePosts: true
    };

    this.loadMorePosts = this.loadMorePosts.bind(this);
    this.updateDimensions = this.updateDimensions.bind(this);
    this.renderWaypoint = this.renderWaypoint.bind(this);
  }
  async loadMorePosts() {
    if (
      Object.keys(this.props.steemPosts.posts).length === 0 ||
      this.props.steemPosts.posts === undefined ||
      this.state.fetchingData === true
    ) {
      return void 0;
    } else if (this.state.fetchingData === false) {
      this.setState({
        fetchingData: true,
        posts: this.props.steemPosts.posts
      });
      const post = this.props.steemPosts.posts[
        this.props.steemPosts.posts.length - 1
      ];
      const query = {
        tag: "",
        start_permlink: post.permlink,
        timestamp: post.timestamp,
        start_author: post.author,
        category: this.props.match.params.category
      };
      //loading post by the category
      switch (this.props.match.params.category) {
        case "trending":
          await this.props.getTrendingPosts(query);
          break;
        default:
          await this.props.getNewPosts(query);
          break;
      }

      await this.setState({
        fetchingData: false
      });
      if (this.state.posts.length === this.props.steemPosts.posts.length) {
        this.setState({
          hasMorePosts: false
        });
      }
    }
  }
  updateDimensions() {
    this.setState({
      innerWidth: window.innerWidth
    });
  }
  async componentWillMount() {
    await this.props.removePostsFromState();
    const query = {
      tag: "",
      limit: 10,
      category: this.props.match.params.category
    };
    window.addEventListener("resize", this.updateDimensions);
    //loading post by the category
    switch (this.props.match.params.category) {
      case "trending":
        await this.props.getTrendingPosts(query);
        break;
      default:
        await this.props.getNewPosts(query);
        break;
    }

    await this.setState({
      posts: this.props.steemPosts.posts,
      fetchingData: false
    });
  }
  checkVoteStatus(props) {
    const find = this.props.steemProfileVotes.votes.find(
      o => o.permlink === props
    );
    if (find) {
      return {
        status: true,
        percent: find.percent
      };
    } else {
      return {
        status: false,
        percent: 0
      };
    }
  }
  renderWaypoint() {
    if (this.state.hasMorePosts) {
      return (
        <Waypoint onEnter={this.loadMorePosts} bottomOffset="-777px">
          <span style={{ width: "50px", height: "50px", color:"white" }}>Loading...</span>
        </Waypoint>
      );
    } else {
      return <EndMessage><span style={{color:"white" }}>....</span></EndMessage>;
    }
  }

  //This doesn't work
   Inject() {
    if (this.state.posts.length < this.props.steemPosts.posts.length) {
      if (this.state.posts.length % 3 === 0) {
        return <div>Element</div>;
      }
    }
  }

  renderPosts() {
    const filtered = this.props.steemPosts.posts.filter(post => {
      return post.author !== undefined;
    });
    return filtered.map(post => {
      let width = "%";

      let fullPermlink = [post.root_author, post.root_permlink].join("/");
      return (
        <Post
          post={post}
          username={this.props.steemProfile.profile._id}
          isFollowing={this.props.following.users.includes(post.author)}
          key={post.id}
          voteStatus={this.checkVoteStatus(fullPermlink)}
          fullPermlink={fullPermlink}
          width={width}
          componentLocation="explore"
        />


      );
    });
  }
  render() {
    const breakpointColumnsObj = {
      default: 3,
      2570: 4,
      1440: 3,
      1368: 3,
      1024: 2,
      768: 2,
      425: 1
    };
    return (
      <Container>
        <Masonry
          breakpointCols={breakpointColumnsObj}
          className="my-masonry-grid"
          columnClassName="my-masonry-grid_column"

        >

          {this.Inject()}
          {this.renderPosts()}
           

        </Masonry>

        {this.state.fetchingData ? <Spinner /> : this.renderWaypoint()}
      </Container>
    );
  }
}

由于我有一个无限滚动，我需要帮助每隔几篇文章注入一个元素，如图所示。

我的砌体网格

标签： javascriptreactjsreact-masonry