确保打印时不会分解反应组件

Question

我正在使用React制作简历创建工具，并在最后显示一个打印屏幕。父组件可以遍历多个页面，但是有一些小的子组件（2-5行）无法拆分成多个页面。

我无法使用CSS或JSS找到可行的解决方案

function IndividualJob(props) {
    const {job} = props;
    return (
        <strong>{job.position}</strong><br></br>
        <em>{job.timeframe}</em><br></br>
        {job.comments}<br></br>
        <br></br>
    );
}

function Jobs() {
    return (
        <>
            {cv.jobs.map((job) => <IndividualJob job={job}/>}
        </>
    );
}

我希望不将分页符分解成PersonalJob组件。

Answer 1

我想出了一个适合我的情况的答案。我刚刚添加了

@media print {
    div {
        page-break-inside: avoid;
    }
}

为防止组件破裂