How do you append a React Component to an html element

Question

I tried to add a React.icon too my button, but it's a react component (with this syntax: ). My question now is how can I append this exact icon component to my button Element with DOM Manipulation? This is my current code:

        const para = document.createElement("p");
        const node = document.createTextNode("New Button");
        const uList = document.getElementById("uList");
        const btn = <button ><BsIcons.BsClockHistory /></button>
        listEl.appendChild(btn);
        para.appendChild(node);
        listEl.appendChild(para);
        uList.appendChild(listEl);

Answer 1

您可以从 React 代码构建 Web 组件，然后将其附加到任何 HTML 元素。