Question

我有一个jsx组件在主页上显示博客，将显示3个部门的博客文章，点击查看更多按钮将查看其他新包。我的问题是添加更多5篇博文，按钮是2,3,4等，那我该如何使用break。我的代码还在这里。

  <div class="row">
   {this.state.post.map((post, index) =>
        index < 3 ? (
            <div class="col-md-4">

                <div class="widget widget-blog">
                    <div class="widget-header m-0">
                        <a href="#" class="pull-right f-s-12">view more <i class="fa fa-angle-double-right"></i></a>
                        <h4>Latest Post</h4>
                    </div>
                    <div class="widget-blog-cover">
                        <img src={`/assets/images/${post.post_photo[0]}`} alt="" />
                    </div>
                    <div class="widget-blog-author">
                        <div class="widget-blog-author-image">
                            <img src="assets/images/pp.png" alt="" />
                        </div>
                        <div class="widget-blog-author-info">
                            <h5 class="m-t-0 m-b-1">{this.state.guide.guide_name}</h5>
                            <p class="text-muted m-0 f-s-11">{this.state.guide.address}</p>
                        </div>
                    </div>
                    <div class="widget-blog-content">
                        <h5>{this.state.guide.biobraphy}</h5>
                        <p>
                            {post.status}
                        </p>
                    </div>
                </div>

            </div>
        ) :
            (<div ><Link to="/TourPackageMode">
                <button type="submit" className="btn btn-purple m-r-20 width-100 pull-right" style={{ marginTop: 30 }}>View More</button>
            </Link></div>)
    )}
</div>

Answer 1

您可以使用切片功能获取帖子的子数组。

{posts.slices(current, current + count).map(post => <Post data={post} key={post.id} />)}

如何在React js中终止map函数中的循环

1 个答案: