<Fragment> tag does not render html in chrome nor throw any error in JSX Preprocessing
Nessuno ha ancora preso questa issue.
- Lingua principale
- JavaScript
- Stelle
- 11.8k
- Fork
- 7.9k
- Merge medio
- 1g 11h
- PR unite (30g)
- 11
Descrizione
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"
/>
);
}
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia con il riferimento a Fragment collegato nell’issue, quindi riproduci l’esempio di test.js utilizzando l’index.html fornito e il comando npx babel --watch con Babel 6.26. Conferma se l’esempio di Fragment documentato viene renderizzato con gli script UMD di React 18 e aggiorna la documentazione pertinente oppure segnala l’incompatibilità confermata.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react
- Ambito
- documentation
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 25/100