Reactjs 迭代子元素，查找最后一个元素

我致力于面包屑组件，并反复研究了以下儿童：

renderChildren = () => {
  const { children, divider } = this.props;
  return (
    React.Children.map(children, child => (
      <>
        {child}
        {divider}
      </>
    ))
  );
}

renderChildren=（）=>{
const{children，divider}=this.props；
返回(
React.Children.map（Children，child=>(
{child}
{除法器}
))
);
}

分隔器位于面包屑中的元素之间，在面包屑中的最后一个元素上，我不想放置分隔器。一张图片，我不想显示最后一个V形（分隔符）：

该错误是因为您将道具定义为

children？：ReactNode

，因为它是可选的TypeScript，可以保护您不受未定义值的影响

---

该错误是因为您将道具定义为

子项？：ReactNode

，因为它是可选的类型脚本，可以保护您不受未定义值的影响您可以使用索引并检查它是否等于

子项数组的长度：

renderChildren = () => {
  const { children, divider } = this.props;
  return (
    React.Children.map(children, (child, index) => (
      <>
        {child}
        {index !== children.length-1 && divider}
      </>
    ))
  );
}

renderChildren=（）=>{
const{children，divider}=this.props；
返回(
React.Children.map（Children，（child，index）=>(
{child}
{index！==childrent.length-1&÷r}
))
);
}
您可以使用index并检查它是否等于
子数组的长度：

renderChildren = () => {
  const { children, divider } = this.props;
  return (
    React.Children.map(children, (child, index) => (
      <>
        {child}
        {index !== children.length-1 && divider}
      </>
    ))
  );
}

renderChildren=（）=>{
const{children，divider}=this.props；
返回(
React.Children.map（Children，（child，index）=>(
{child}
{index！==childrent.length-1&÷r}
))
);
}
吹毛求疵，但是删除-1并使用this.props.children.map（）
上使用
React.children.map（）
来挑剔，但是删除-1并使用React.children.map（）

，而不仅仅是您的标准

this.props.children.map（）

类型脚本：{（indexrenderChildren = () => { const { children, divider } = this.props; return ( React.Children.map(children, (child, index) => ( <> {child} {index !== children.length-1 && divider} </> )) ); }