在React/JSX中如何简洁创建多个相同原生元素的副本？

首先明确：JSX 本身没有原生支持3 * <td/>这类运算符重载的写法，不过可以通过以下几种方式实现比你现有写法更优雅、可读性更高的效果：

1. 原生JS极简写法 #

利用Array.from的第二个回调参数，可以省去单独的map调用，代码更紧凑：

// n 为需要生成的元素数量
Array.from({length: n}, (_, i) => <td key={i} />)

和你现有的扩展运算符+keys()的写法相比，代码长度更短，逻辑也更直观。

2. 封装工具函数（最推荐的工程化方案） #

你可以把重复生成元素的逻辑封装成通用工具函数，调用时完全符合你要的一行写完的需求：

工具函数定义 #

import React from 'react'

const repeatElement = (element, count) => 
  Array.from({length: count}, (_, index) => 
    // 自动给生成的元素加上key属性，避免React告警
    React.cloneElement(element, { key: index })
  )

调用方式 #

// 直接生成3个td元素，和你期望的`3 * <td/>`使用体验几乎一致
repeatElement(<td />, 3)

3. 第三方工具库快捷写法 #

如果你的项目已经引入了Lodash，可以直接用_.times方法实现：

import _ from 'lodash'

_.times(3, (i) => <td key={i} />)

注意事项 #

• 所有动态生成的React元素都需要添加唯一的key属性，帮助React做虚拟DOM Diff优化，避免不必要的重渲染和告警。
• 如果生成的元素内部有状态、或者会有排序/增删操作，不要用数组索引作为key，建议传入唯一的业务标识作为key值。

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