reactjs - Hur man lägger till JSX i DOM i React?

Jag vill bifoga något till min DOM.

let parent = document.getElementById("TabContainer");
let settings = 
<Box id="test">
  <GlobalSettings activeTab={"test"}></GlobalSettings>
</Box>
                
parent.appendChild(settings);

Jag får följande fel

Argument of type 'Element' is not assignable to parameter of type 'Node'.
  Type 'Element' is missing the following properties from type 'Node': baseURI, childNodes, firstChild, isConnected, and 47 more.

Box är en vanlig div och GlobalSettings är min egen komponent. Jag vet att det kanske är dålig praxis att manipulera DOM på det här sättet, men för mig verkar det vara ett enkelt sätt. Förresten körs den här koden i onClick-funktionen från en knapp.

Jag hoppas att någon kan hjälpa mig :)

Tack

Svar #1

JSX är bara syntaktiskt socker; trots sitt utseende är det inte HTML, det är JavaScript. Du kan "lägga till" något i din DOM med ReactDOM.render.

Redigera: du har förmodligen större nytta av att använda portar; det är exakt det de är till för.

Svar #2

React 18 varnar att du behöver använda createRoot istället.

Du kan fixa det genom att byta ut ReactDom.render mot detta:

import { createRoot } from 'react-dom/client';

createRoot(parent).render(settings)

Relaterade artiklar