如何移除JavaScript中array.map方法内的重复代码？

你可以把这段重复的链接代码提取成一个可复用的React组件，具体操作如下：

1. 抽离重复代码为独立组件
   把重复的JSX结构单独封装成组件，接收usp作为参数：

const USPLink = ({ usp }) => {
  return (
    <a href={usp.url}>
      <div>{usp.text}</div>
    </a>
  );
};

如果用TypeScript，还可以给参数添加类型约束，提升代码健壮性：

interface USP {
  url: string;
  text: string;
}

const USPLink = ({ usp }: { usp: USP }) => (
  <a href={usp.url}>
    <div>{usp.text}</div>
  </a>
);

2. 在遍历中复用组件
   原来.map里的重复代码直接替换成这个组件，注意保留key属性：

usps.map((usp) => (
  <USPLink key={usp.url} usp={usp} />
))

这样后续要修改链接的结构、样式或逻辑时，只需要改动USPLink组件这一处即可，既消除了重复代码，也让维护变得更高效。

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