<Fragment> tag does not render html in chrome nor throw any error in JSX Preprocessing
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 11.8k
- Forks
- 7.9k
- Ø Merge
- 1 T. 11 Std.
- Gemergte PRs (30 T.)
- 11
Beschreibung
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"
/>
);
}
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit der im Issue verlinkten Fragment-Referenz und reproduziere anschließend das Beispiel aus test.js mit der bereitgestellten index.html und dem Befehl npx babel --watch unter Verwendung von Babel 6.26. Bestätige, ob das dokumentierte Fragment-Beispiel mit den React-18-UMD-Skripten gerendert wird, und aktualisiere die entsprechende Dokumentation oder melde die bestätigte Inkompatibilität.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react
- Bereich
- documentation
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Muss geklärt werden
- Anfängerfreundlichkeit
- 25/100