如何移除.map遍历生成的最后一个元素的ArrowDownIcon箭头

我正在遍历一个字母数组：

const letters = ["A", "B", "C", "D", "E", "F"];

需求是除最后一个字母外，其余每个字母下方都显示向下箭头。当前代码如下：

App组件 #

const App = () => {
  return (
    <Box>
      {letters.map((letter, index) => (
        <Letter key={index} letter={letter} />
      ))}
    </Box>
  );
};

Letter组件 #

const Letter = ({ letter }) => {
  return (
    <Box
      display="flex"
      flexDirection="column"
      justifyContent="center"
      alignItems="center"
    >
      <Text>{letter}</Text>
      <ArrowDownIcon />
    </Box>
  );
};

目前所有字母下方都显示了箭头，需要移除最后一个字母'F'下方的箭头。尝试给ArrowDownIcon添加_last={{ display: "none" }}，但会移除所有箭头。

解决方案 #

方法1：传递"是否为最后一项"的状态给子组件 #

在父组件的遍历中判断当前项是否为最后一个，将状态传给Letter组件，由子组件控制箭头的显示：

修改后的App组件：

const App = () => {
  return (
    <Box>
      {letters.map((letter, index) => (
        <Letter 
          key={index} 
          letter={letter} 
          isLast={index === letters.length - 1} 
        />
      ))}
    </Box>
  );
};

修改后的Letter组件：

const Letter = ({ letter, isLast }) => {
  return (
    <Box
      display="flex"
      flexDirection="column"
      justifyContent="center"
      alignItems="center"
    >
      <Text>{letter}</Text>
      {/* 仅非最后一项显示箭头 */}
      {!isLast && <ArrowDownIcon />}
    </Box>
  );
};

方法2：在父组件直接控制箭头渲染 #

如果不想修改子组件，可以将箭头的渲染逻辑移到父组件，只在非最后一项后渲染箭头：

const App = () => {
  return (
    <Box>
      {letters.map((letter, index) => (
        <Box key={index} display="flex" flexDirection="column" alignItems="center">
          <Text>{letter}</Text>
          {index !== letters.length - 1 && <ArrowDownIcon />}
        </Box>
      ))}
    </Box>
  );
};

内容的提问来源于stack exchange，提问作者Jevon Cochran