import { PropsWithChildren, ReactNode } from "react";
function Container({ children }: { children: ReactNode[] }) {
return (
<div>
<div>{children.length}</div>
<div>{children}</div>
</div>
);
}
export default function App() {
const list = [1, 2, 3];
return (
<div className="App">
<Container>
{list.map((e) => (
<span key={'first-list ' + e}>Element</span>
))}
{list.map((e) => (
<span key={'second-list ' + e}>Element</span>
))}
</Container>
</div>
);
}
在上面的例子中,容器声称有children.length === 2
,尽管有6个元素被呈现为子元素,我很想知道为什么会这样,以及获得正确子元素数量的最佳方法是什么。
sandbox
1条答案
按热度按时间wsxa1bj11#
仔细看这里:
有两个值被插入到JSX中;两个元素数组就像
因此有两个孩子,虽然React在渲染时会将数组元素扁平化到一个容器中(产生6个兄弟),但在此之前它不会为你做这件事;
children
的属性将是这两个数组。要得到6,你需要自己把它弄平:
一个三个三个一个