Javascript 如果第一张纸上满是React，则显示另一张纸

我有一个纸质元素（A4大小的div），显示用户输入的信息（在Reactjs中使用contextapi）

我想要的是，如果paper元素充满文本，请添加另一张纸，并显示其中剩余的信息

这是我的密码

<Paper>
 <div class="page" data-size="A4">
  <Grid container xs={12} direction="column" justify="center"  >
   <Typography className={classes.title} variant="h5">Experiences </Typography>
   <personalInfo.Consumer>
     {( {experience} ) => (
              experience.map((exp,i) => {
                return(
                <div key={i}>
                  <Grid container xs={12} spacing={false}>
                    <Grid xs={3}>
                      <Typography className={classes.dates}>
                      {exp.startdate}-{exp.enddate}<br/>
                      {exp.city},{exp.country}
                      </Typography>
                  </Grid>
                <Grid xs={8}>
                  <Typography >
                  <h4>{exp.job}</h4>
                  {exp.employer}
                  <br/>
                  {exp.description}
                  </Typography>
                </Grid>
              </Grid>
            </div>
              
              )})
          )}
 <personalInfo.Consumer>
</Grid>
</div>   
        </Paper>```

经历
{（{experience}）=>(
experience.map（（exp，i）=>{
返回(
{exp.startdate}-{exp.enddate}

{exp.city}，{exp.country}
{exp.job}
{exp.employer}


{exp.description}
)})
)}
```

您想如何知道纸张何时会满？当其元素超过A4大小时