(Реагировать) встроенные HTML -листья отдельные DOM; React Component нет ⇐ Javascript

[Anonymous]

Когда мы делаем несколько узлов условно (

Код: Выделить всё

ex. {expanded && ...}

), html-элемент оставляет отстраненный DOM, но Creact Components нет.
Пример
e.g.

Код: Выделить всё

...
return 
...
{expanded && Foo

Если расширенное состояние идет false -> true -> false , элементы в правой стороне будут вставлены и удалены из dom.

После этого foo остается как .

. Сделайте их в качестве отдельного компонента: < /p>

Код: Выделить всё

function Foo() {
return Foo
}
< /code>
и, выполняя что-то вроде предыдущего, но используя  < /code> компонент вместо встроенного html-элемента: < /p>
...
return 
...
{expanded && 

it не оставляет отстраненного Dom [/b].

Devtools < /p>
И мне интересно, что .. < /h1>
Какова разница между использованием inline < /code> (или других HTML -элементов) и обертывания /разделения на компонент? См.
Посетите https://q4g5mg.csb.app/, дважды нажмите кнопку, чтобы развернуть/коллапс, а затем сделать снимок
Полный код примера ниже:
import { useState } from "react";
import "./App.css";

const dummyArrays = Array.from({ length: 100 });
const Dummy = () => {
return (

• {dummyArrays.map((_, index) => (
• {index}
  ))}

);
};

function WowList() {
return (

• WOW
• WOW
• WOW
• WOW
• WOW

);
}

export default function App() {
const [expanded, setExpanded] = useState(false);

return (

{
setExpanded((prev) => !prev);
}}
>
{expanded ? "close" : "open"}

{expanded && (




Detached DOM Elements problem test



)}

);
}


^ snapshot: до эксплуатации/коллапса


Подробнее здесь: https://stackoverflow.com/questions/796 ... nt-doesn-t