Rendering av element i React
I de föregående kapitlen lärde vi oss hur man skapar JSX-element för att bygga våra användargränssnitt. Nu är det dags att visa dessa element på skärmen genom att rendera dem i vår React-applikation.
Paketet react-dom/client
För att rendera ett React-element i DOM-trädet använder vi paketet react-dom/client, som tillhandahåller två viktiga metoder:
- createRoot(container): Denna metod skapar en React-root genom att referera till ett befintligt DOM-element. I de flesta React-applikationer är detta element ett
div-element med idroot, vanligtvis definierat i filenindex.html. Denna root fungerar som behållare där hela React-applikationen renderas; - render(element): Render-metoden förväntar sig en referens till ett React-element eller komponent och anger vad som ska renderas i root-behållaren.
Här är en grundläggande kodstruktur som illustrerar hur denna process fungerar:
// Import the necessary method from the `react-dom` package.
import { createRoot } from "react-dom/client";
// Obtain a reference to the DOM container with the `"root"` id.
const root = createRoot(document.getElementById("root"));
// Define the React element you want to render.
const elementToRender = <YourReactElement />;
// Use the `render()` method to place the element in the `root` container.
root.render(elementToRender);
Praktiskt exempel
Låt oss omsätta denna teori i praktiken. Titta på följande exempel där vi skapar ett React-element och renderar det i DOM:
Notera
Alla exempel och övningar presenteras i CodeSandboxes så att du kan arbeta med koden utan avbrott för miljöinställningar.
Som standard visas en live-förhandsvisning av sidan. Dra reglaget på vänster sida av CodeSandbox för att granska koden.
I det här exemplet skapas ett React-element kallat article och renderas i den angivna rotbehållaren.
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Can you explain what the `createRoot` function does in more detail?
What is the difference between `createRoot` and the old `ReactDOM.render` method?
Can you show another example of rendering a different React element?
Awesome!
Completion rate improved to 2.17Rendering av element i React
Svep för att visa menyn
I de föregående kapitlen lärde vi oss hur man skapar JSX-element för att bygga våra användargränssnitt. Nu är det dags att visa dessa element på skärmen genom att rendera dem i vår React-applikation.
Paketet react-dom/client
För att rendera ett React-element i DOM-trädet använder vi paketet react-dom/client, som tillhandahåller två viktiga metoder:
- createRoot(container): Denna metod skapar en React-root genom att referera till ett befintligt DOM-element. I de flesta React-applikationer är detta element ett
div-element med idroot, vanligtvis definierat i filenindex.html. Denna root fungerar som behållare där hela React-applikationen renderas; - render(element): Render-metoden förväntar sig en referens till ett React-element eller komponent och anger vad som ska renderas i root-behållaren.
Här är en grundläggande kodstruktur som illustrerar hur denna process fungerar:
// Import the necessary method from the `react-dom` package.
import { createRoot } from "react-dom/client";
// Obtain a reference to the DOM container with the `"root"` id.
const root = createRoot(document.getElementById("root"));
// Define the React element you want to render.
const elementToRender = <YourReactElement />;
// Use the `render()` method to place the element in the `root` container.
root.render(elementToRender);
Praktiskt exempel
Låt oss omsätta denna teori i praktiken. Titta på följande exempel där vi skapar ett React-element och renderar det i DOM:
Notera
Alla exempel och övningar presenteras i CodeSandboxes så att du kan arbeta med koden utan avbrott för miljöinställningar.
Som standard visas en live-förhandsvisning av sidan. Dra reglaget på vänster sida av CodeSandbox för att granska koden.
I det här exemplet skapas ett React-element kallat article och renderas i den angivna rotbehållaren.
Tack för dina kommentarer!
