React: `data-reactroot =" "` perdido en el servidor render si el elemento está dentro `<context.provider>'</context.provider>

¿Quieres solicitar una función o informar de un error ?

Bicho.

¿Cuál es el comportamiento actual?

Llamar a .renderToString() en <React.Fragment><div>Hello!</div></React.Fragment> produce <div data-reactroot="">Hello!</div> .

Sin embargo, muchas otras combinaciones de elementos raíz DOM dentro de elementos React "invisibles" se representan sin data-reactroot="" .

Por ejemplo, todo lo siguiente produce <div>Hello!</div> (sin data-reactroot="" ):

<React.Fragment><React.Fragment><div>Hello!</div></React.Fragment></React.Fragment>

<Context.Provider><div>Hello!</div></Context.Provider>

<Context.Consumer>{() => <div>Hello!</div>}</Context.Consumer>

<React.StrictMode><div>Hello!</div></React.StrictMode>

Si el comportamiento actual es un error, proporcione los pasos para reproducir y, si es posible, una demostración mínima del problema. Pegue el enlace a su JSFiddle (https://jsfiddle.net/Luktwrdm/) o CodeSandbox (https://codesandbox.io/s/new) ejemplo a continuación:

Véase más arriba.

¿Cuál es el comportamiento esperado?

Supongo que cualquiera de los ejemplos anteriores debería producir un marcado que incluya data-reactroot="" en el elemento div .

¿Qué versiones de React y qué navegador / sistema operativo se ven afectados por este problema?

Problema presente en todas las versiones> = 16.7.0, posiblemente versiones anteriores también.

Este es un problema menor; supongo que solo afectaría donde el marcado se rehidrata en el lado del cliente usando .render() lugar de .hydrate() , uso que no se recomienda. Sin embargo, todavía se admite oficialmente el uso de .render() para rehidratar.

Puedo implementar una solución y hacer un PR. Pero, ¿alguien puede confirmar que el comportamiento esperado es lo que creo que es, y que de hecho se trata de un error?