React应用中如何将数组对象指定值各渲染为独立<li>标签

嘿，这个问题其实很好解决！核心就是把每个对象里你需要的属性值拆成单独的元素，再统一转换成<li>标签，这样每个值就能单独设置样式啦。

方法一：使用flatMap一步到位 #

flatMap可以先将每个对象映射为包含目标值的数组，再自动把这些数组合并成一个一维数组，非常适合这种场景：

array.flatMap((object) => {
  // 提取当前对象中需要的属性值，逐个转换成<li>
  return [
    <li key={`a-${object.a}`}>{object.a}</li>,
    <li key={`b-${object.b}`}>{object.b}</li>,
    <li key={`d-${object.d}`}>{object.d}</li>
  ];
})

方法二：先映射再扁平化 #

如果你对flatMap不太熟悉，也可以分两步来：先把每个对象转成值数组，再用.flat()扁平化，最后转换成<li>：

array
  .map((object) => [object.a, object.b, object.d]) // 每个对象变成值数组
  .flat() // 把二维数组转成一维
  .map((value, index) => <li key={index}>{value}</li>) // 每个值转成<li>

进阶：给不同属性值设置独立样式 #

如果需要给不同属性（比如d字段的负数）单独加样式，直接在生成<li>的时候指定类名或者行内样式就行：

array.flatMap((object) => {
  return [
    <li key={`a-${object.a}`} className="a-class">{object.a}</li>,
    <li key={`b-${object.b}`} style={{ color: 'blue' }}>{object.b}</li>,
    <li key={`d-${object.d}`} className={object.d < 0 ? 'negative-style' : ''}>{object.d}</li>
  ];
})

注意：React渲染列表时必须给每个<li>加上唯一的key属性，避免控制台警告，上面的例子里用了“属性名-值”或者索引作为key，你可以根据实际情况选择更合适的唯一标识。

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