React: `data-reactroot =" "` perdido na renderização do servidor se o elemento dentro de `<context.provider>`</context.provider>

Você quer solicitar um recurso ou relatar um bug ?

Inseto.

Qual é o comportamento atual?

Chamar .renderToString() em <React.Fragment><div>Hello!</div></React.Fragment> produz <div data-reactroot="">Hello!</div> .

No entanto, muitas outras combinações de elemento raiz DOM dentro de elementos React "invisíveis" são renderizadas sem data-reactroot="" .

por exemplo, todos os seguintes produzem <div>Hello!</div> (sem 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>

Se o comportamento atual for um bug, forneça as etapas para reproduzir e, se possível, uma demonstração mínima do problema. Cole o link para o seu exemplo JSFiddle (https://jsfiddle.net/Luktwrdm/) ou CodeSandbox (https://codesandbox.io/s/new) abaixo:

Veja acima.

Qual é o comportamento esperado?

Presumo que qualquer um dos exemplos acima deve produzir marcação incluindo data-reactroot="" no elemento div .

Quais versões do React e quais navegadores / sistemas operacionais são afetados por esse problema?

Problema presente em todas as versões> = 16.7.0, possivelmente versões anteriores também.

Este é um problema menor - eu acho que afetaria apenas onde a marcação é reidratada no lado do cliente usando .render() vez de .hydrate() - uso que é desencorajado. No entanto, o uso de .render() para reidratar ainda é oficialmente suportado.

Posso implementar uma correção e fazer um PR. Mas alguém pode confirmar se o comportamento esperado é o que eu acho que é, e se isso é realmente um bug?