Kontext im Seitenlayout in NextJS

Betrachten wir das grundlegende Seitenlayout, das wir in der vorherigen Lektion begonnen haben zu analysieren:

export default function RootLayout({children}) {
	return (
		<html lang="en">
			<body>
				{children}
			</body>
		</html>
	);
}

Wie Sie sehen, stellt das Seitenlayout eine Komponente mit einer Funktion dar. Dabei wird der Funktion ein Objekt übergeben, aus dem wir den Schlüssel children in die entsprechende Variable extrahieren. In dieser Variable ist der Inhalt der Datei page.jsx gespeichert, die der angefragten URL entspricht.

Das bedeutet, in der Datei layout.jsx ist unser Seitenlayout gespeichert, und mit Hilfe der Variable children geben wir die Stelle im Seitenlayout an, an die der Inhalt der Seite eingefügt werden soll.

Lassen Sie uns als Beispiel den Inhalt der Seite in einem Tag formatieren:

export default function RootLayout({children}) {
	return (
		<html lang="en">
			<body>
				<main>
					{children}
				</main>
			</body>
		</html>
	);
}

Formatieren Sie den Inhalt Ihrer Website im Tag main.