Para explicar mejor mi pregunta, usaré un ejemplo:

Digamos que tengo dos elementos de reacción, que se contienen entre sí. Llamemos al contenedor Box y al hijo Stuff . Box simplemente representa un div con className="box" que rodea a los elementos secundarios que se le asignan. La mayoría de las veces, Stuff representa algo, pero su función de render puede devolver un null cuando decide que no hay nada que representar.

Aquí está el giro: si <Box> está vacío, no quiero mostrarlo en absoluto. Así que decidí usar selectores css3 y escribir algo como

 .box:empty { display: none; }

... que debería funcionar, excepto que react muestra una etiqueta <noscript> , lo que evita que el navegador trate el elemento .box principal como vacío...

¿Hay una forma elegante de evitar esto? Me gustaría mantener la lógica de determinar el vacío dentro de Stuff y hacer que Box simplemente "mire" su contenido y decida si quiere mostrar algo o no.

ACTUALIZAR

Este violín https://jsfiddle.net/69z2wepo/67543/ tiene un ejemplo de lo que estoy tratando de hacer. Extrañamente, en ese violín, funciona , y reaccionar no muestra etiquetas <noscript> ... ¿por qué <noscript> en mi código? ¿En qué casos reacciona elige renderizar <noscript> s?