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

[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].
Отдельный снимки DOM от Chrome devtools
Это отстраненный снимки DOM от Chrom devtools
и мне интересно, что ..
и мне интересно, что
и мне интересно. (или другие HTML -элементы) и обертывание/разделение в компонент?

Я хотел бы узнать точное объяснение этого явления. Разверните/коллапс, а затем сделайте снимок
Полный код примера приведен ниже:

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

import { useState } from "react";
import "./App.css";

const dummyArrays = Array.from({ length: 100 });
const Dummy = () => {
return (
[list]
{dummyArrays.map((_, index) => (
[*]{index}
))}
[/list]
);
};

function WowList() {
return (
[list]
[*]WOW
[*]WOW
[*]WOW
[*]WOW
[*]WOW
[/list]
);
}

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

return (

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

{expanded && (




Detached DOM Elements problem test



)}

);
}

до
^ Snapshot: перед Expand/Collapsse
после
^ Snapshot: после Expand/collapse

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

не остается отдельным DOM, но остальные из них (под , независимо от того, является ли это HTML -элементом или компонентом)
В ожидании четкого ответа на это. Спасибо!

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