reactjs props.children是节点列表，但长度错误？

qv7cva1a 于 2023-02-22 发布在 React

关注(0)|答案(1)|浏览(97)

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

reactjs

来源：https://stackoverflow.com/questions/75514364/props-children-is-list-of-nodes-but-the-length-is-wrong

1条答案

按热度按时间

wsxa1bj11#

仔细看这里：

<Container>
    {list.map((e) => (
      <span>Element</span>
    ))}
    {list.map((e) => (
      <span>Element</span>
    ))}
  </Container>

有两个值被插入到JSX中;两个元素数组就像

<Container>
    {arrayOfElements}
    {arrayOfElements}
  </Container>

因此有两个孩子，虽然React在渲染时会将数组元素扁平化到一个容器中（产生6个兄弟），但在此之前它不会为你做这件事;children的属性将是这两个数组。
要得到6，你需要自己把它弄平：

<div>{children.flat().length}</div>

一个三个三个一个

赞(0）回复(0）举报 2023-02-22

我来回答

reactjs props.children是节点列表，但长度错误？

1条答案

相关问题

热门标签

最新问答