React: `data-reactroot =" "` perdu dans le rendu du serveur si l'élément à l'intérieur `<context.provider>''</context.provider>

Voulez-vous demander une fonctionnalité ou signaler un bogue ?

Bogue.

Quel est le comportement actuel?

Appeler .renderToString() sur <React.Fragment><div>Hello!</div></React.Fragment> produit <div data-reactroot="">Hello!</div> .

Cependant, de nombreuses autres combinaisons d'éléments racine DOM dans des éléments React "invisibles" sont rendues sans data-reactroot="" .

Par exemple, tous les éléments suivants produisent <div>Hello!</div> (sans 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 le comportement actuel est un bogue, veuillez fournir les étapes pour reproduire et si possible une démo minimale du problème. Collez le lien vers votre exemple JSFiddle (https://jsfiddle.net/Luktwrdm/) ou CodeSandbox (https://codesandbox.io/s/new) ci-dessous:

Voir au dessus.

Quel est le comportement attendu?

Je suppose que l'un des exemples ci-dessus devrait produire un balisage comprenant data-reactroot="" sur l'élément div .

Quelles versions de React et quel navigateur / système d'exploitation sont concernés par ce problème?

Problème présent dans toutes les versions> = 16.7.0, peut-être aussi dans les versions antérieures.

C'est un problème mineur - je suppose que cela n'affecterait que l'endroit où le balisage est réhydraté côté client en utilisant .render() plutôt que .hydrate() - utilisation déconseillée. Cependant, l'utilisation de .render() pour se réhydrater est toujours officiellement prise en charge.

Je peux implémenter un correctif et faire un PR. Mais quelqu'un peut-il confirmer que le comportement attendu est ce que je pense, et qu'il s'agit bien d'un bogue?