<Fragment> tag does not render html in chrome nor throw any error in JSX Preprocessing
Personne n'a encore pris cette issue.
- Langage dominant
- JavaScript
- Étoiles
- 11.8k
- Forks
- 7.9k
- Merge moyen
- 1 j 11 h
- PR mergées (30 j)
- 11
Description
https://beta.reactjs.org/reference/react/Fragment#fragment
Doesnt throw error in jsx preprocessing(npx babel --watch sr --out-dir . --presets react-app/prod) for babel version:6.26 installed as per current official react install docs ,please have a check if new beta version supports.
Can be related to
#5532 ?
{/* index.html */}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test Page-React</title>
</head>
<body>
<div id="Sc"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- Load your React component. -->
<script type="module" src="test.js"></script>
</body>
</html>
{/* test.js */}
{
const root9 = ReactDOM.createRoot(document.getElementById('Sc'));
const element9 = <Gallery />;
root9.render(element9);
function ProfileS() {
return (
<img
src="https://i.imgur.com/MK3eW3As.jpg"
alt="Katherine Johnson"
/>
);
}
function Gallery() {
return (
<Fragment>
<div>
<h1>Amazing scientists</h1>
<ProfileS /> {/* react component 1 */}
<ProfileS /> {/* react component 2 */}
<ProfileS /> {/* react component 3 */}
</div>
<div>
<ProfileS /> {/* react component 1 */}
<ProfileS /> {/* react component 2 */}
</div>
<div>
<Pile />
</div>
</Fragment>
);
}
function Pile() {
return (
<img
src="https://i.imgur.com/QIrZWGIs.jpg"
alt="Alan L. Hart"
/>
);
}
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par la référence de Fragment liée dans l’issue, puis reproduisez l’exemple de test.js à l’aide du index.html fourni et de la commande npx babel --watch avec Babel 6.26. Vérifiez si l’exemple de Fragment documenté est rendu avec les scripts UMD de React 18, puis mettez à jour la documentation concernée ou signalez l’incompatibilité confirmée.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, react
- Domaine
- documentation
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- À clarifier
- Accessibilité débutants
- 25/100