reactjs - 页面渲染后需要切片卡片 react 类组件

Question

我有一个页面，我最初需要显示 9 张卡片，点击显示更多我需要显示更多卡片，直到 API 调用有数据。我使用了切片方法，我能够实现同样的效果，但是由于切片 SEO 性能受到影响，这些 div 没有被谷歌抓取，所以现在的问题是我需要在页面上渲染所有 div 卡并且只需要显示9 用其他方法。我不知道如何实现这一目标。任何人都可以在反应中使用类组件来帮助我。

import React from 'react';
import WebinarList from './WebinarList';
import Webinars from './Webinars';

export default class WebinarData extends React.Component{
constructor(...props) {
    super(...props);
    this.state = {
       isVisible: 9,
       setFlag: true,
       totalValue:0
    };
    this.showmoreWebinar = this.showmoreWebinar.bind(this);
    this.mathCal = this.mathCal.bind(this);
    
}

  componentWillReceiveProps(nextProps) {
    const webinarList = this.props.webinarListInfo ? 
    this.props.webinarListInfo: null;
    const total =  webinarList? webinarList.length : 0;

    if(this.state.isVisible >= total){
        this.setState((old)=>{
            return {
                isVisible: 9,
            }
        })
    }
    
  }

  showmoreWebinar(offset, total){       
    this.setState((old)=>{
        return {
            isVisible: old.isVisible + offset,
        }
    })     
   }

   mathCal(n){
    if(n > 0)
        return Math.ceil(n/3.0) * 3;
    else if( n < 0)
        return Math.floor(n/3.0) * 3;
    else
        return 3;
   }

  render(){
  // console.log("in web");
  // console.log(this.props.webinarListInfo);
  const webinarList = this.props.webinarListInfo ? 
 this.props.webinarListInfo: null;
 const webinarBanner = this.props.webinarBanner && 
  this.props.webinarBanner.webinarLandingItems ? 
 this.props.webinarBanner.webinarLandingItems[0]: null;
 let offset = webinarBanner && webinarBanner.PageSize? 
 webinarBanner.PageSize : 9;
 offset= this.mathCal(offset);
const showMore = webinarBanner &&  webinarBanner.LoadMoreButtonText? 
 webinarBanner.LoadMoreButtonText: "Show more" ;
const list = webinarList ?  webinarList.map((item, index) => (
     <Webinars info={item} index={index} labelInfo= 
{this.props.webinarList}/>
    )
    ) : null;
const total =  webinarList? webinarList.length : 0;
return(
    <div>
        <div className="webinarData">
            <WebinarList labelInfo={this.props.webinarList} totalList= 
{webinarList}/>
            {list}           
        </div>
        <div className="l-show-more-btn">
        {webinarBanner ? (<button className="c-button showmore-webinar 
  is-desktop is-medium is-upper-case" 
                      style={{ display: this.state.isVisible >= total ? 
 'none' : 'block' }}
                onClick={() => this.showmoreWebinar(offset, total)} >
                {showMore}
            </button>) : null}
        </div>
     {total <= 0 ? (<div className=""><p  style={{textAlign:'center'}}> 
 {this.props.webinarList && this.props.webinarList.ResultNotFound? 
 this.props.webinarList.ResultNotFound: null}</p></div>):null}
    </div>
  );
  }
 }

现在我需要删除此切片方法，以便在页面加载时显示所有内容，然后需要对其进行切片（基本上在 UI 中显示和隐藏某种东西）。以下是它在 UI 中的结构：