Insertar un salto de página en en la aplicación React

Básicamente, mi tabla tiene varios encabezados secundarios y quiero que se inserte un salto de página después de tantas de estas subsecciones y evite un salto de página automático en medio de una de las secciones. Se ve esto aproximadamente. Las áreas grises son los sub-encabezados donde un salto de página sería antes si fuera como la subsección 4, 8, 12, etc.

mesa

Hay dos problemas principales que me encuentro y que pueden o no ser exclusivos de React. Además, estoy usando Bootstrap.

1) El

como hijo de

,

,

:

Mi

inicial fue simplemente insertar

después de cada 4º

: null }

O:

 { i = 4 ? 
: null }

O:

 { i = 4 ? 
: null }

Si bien estos van a evitar el error, no hacen nada. pagebreak el pagebreak

Parece que no puede colocar ningún tipo de salto de página dentro de una etiqueta

. Esto activará el error (parafraseado) ya que un

cannot be a child of

/

/

.

Así que hacer algo como lo siguiente no está permitido:

 let i = 1; return _.map(section, s => { i++; return ( 
{ i = 4 ?
: null }
{s.subSectionTitle}
{s.data1} {s.data2} {s.data3} {s.data4} {s.data5} {s.data6}
) })

Algunas otras ideas shinys que tuve que no funcionaron fueron hacer algo como:

 { i = 4 ? 
.

2) Creando una nueva

para cada subsección.

Simplemente se verá como una mierda porque los anchos de las columnas variarán de una tabla a otra a menos que haga los anchos estáticos que no quiero hacer. Desea mantenerlos dynamics mientras todos los anchos de columnas sean iguales, lo que se determina por el ancho máximo de un punto de datos dentro de una columna determinada.

Dicho esto, esto funciona porque en realidad inserta un salto de página:

  return ( 
{s.subSectionTitle}
{s.data1} {s.data2} {s.data3} {s.data4} {s.data5} {s.data6}
{s.subSectionTitle}
{s.data1} {s.data2} {s.data3} {s.data4} {s.data5} {s.data6}
)

¿Alguna sugerencia sobre cómo manejar esto?

Esto es correcto:

un

no puede ser un hijo de

o

o

Pero no hay nada que le impida marcar y estilizar su tabla, por lo que cada tanto tiene una fila, con el estilo de elemento de nivel de bloque, que representa un salto de página, declarado en el CSS mediante:

 page-break-before: always; 

y que contiene una sola celda de datos sin contenido, utilizando:

  

También puede evitar saltos de página en filas de tablas convencionales, utilizando:

 page-break-before: avoid 

Ejemplo de trabajo:

 table { border-collapse: collapse; } td { height: 12px; padding: 6px 24px; border: 1px solid rgb(0, 0, 0); } tr { page-break-before: avoid; } tr.page-break { display: block; page-break-before: always; } tr.page-break td { border: 1px solid rgba(0, 0, 0, 0); } 
 
A1 A2 A3 A4 A5 A6 A7
B1 B2 B3 B4 B5 B6 B7
C1 C2 C3 C4 C5 C6 C7
D1 D2 D3 D4 D5 D6 D7
E1 E2 E3 E4 E5 E6 E7
F1 F2 F3 F4 F5 F6 F7
G1 G2 G3 G4 G5 G6 G7

Basándose en la respuesta de Rounin para mostrar lo que funcionó en un ejemplo de React:

 @media print { tr { display: block; } .pagebreak { break-after: always !important; page-break-after: always !important; page-break-inside: avoid !important; } } 

 // component.jsx import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import styles from '../assets/scss/app.scss'; class TestPrint extends Component { constructor(props) { super(props); this.state = { data: [ 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test' ] } } renderContent() { let i = 0; return this.state.data.map((d) => { i++ if (i % 10 === 0) { return (  {i} - {d}  ) } else { return (  {i} - {d}  ) } }); } render() { return (  { this.renderContent() } 
) } } ReactDOM.render(, document.getElementById('app'));