reactjs - 遍历 child ，找到最后一个元素

Question

我在面包屑组件上工作，我会像这样迭代 child :

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

分隔符位于面包屑中的元素和面包屑中的最后一个元素之间我不想放置分隔符。一张图片，我不想显示最后一个人字形(分隔线):

Answer 1

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

更新:

const children: React.ReactNode Object is possibly 'null' or 'undefined'.ts(2533)

超出了这个答案的范围，但是为了处理这个场景

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

出现该错误是因为您将 prop 定义为 children?: ReactNode，因为它是可选的 TypeScript 可以保护您免受未定义值的影响