React中使用map函数渲染rc-progress组件不生效问题排查

嘿，我一眼就瞅出问题所在了！你在JSX里给Line组件传属性的方式错了——把变量用双引号包起来了，这会让React把{obj.percent}当成普通字符串，根本不会去解析它对应的数值。

具体原因 #

在JSX语法里，如果你用双引号包裹{}表达式（比如percent="{obj.percent}"），React不会处理这个表达式，而是直接把字符串"{obj.percent}"传递给组件。rc-progress的Line组件需要的是数字类型的percent和字符串类型的颜色值，自然就拿不到正确参数，组件也就没法正常渲染了。

修复后的代码 #

只需要去掉属性值的双引号，直接用大括号包裹变量就行，另外记得给map渲染的元素加上唯一key属性（避免React控制台警告）：

import { Line, Circle } from 'rc-progress';

render(){
  const elements = [
    {'percent':10,'color':'#3FC7FA'}, 
    {'percent':30,'color':'#85D262'},
    {'percent':80,'color': '#FE8C6A'}
  ]
  return (
    <>
      {elements.map((obj, index) => (
        <Line 
          key={index} // 如果数据里有唯一ID字段，优先用ID替代index更稳妥
          percent={obj.percent} 
          strokeWidth="6" 
          strokeColor={obj.color} 
          trailWidth="6" 
        />
      ))}
    </>
  )
}

额外补充 #

1. 关于key属性：React要求列表渲染时每个元素必须有唯一key，帮助React高效识别元素的变化。如果你的elements数组里有类似id的唯一标识，用它代替index会更可靠。
2. Fragment标签：外层的<>是React的Fragment，用来包裹多个元素，避免生成额外的DOM节点，也可以写成<React.Fragment>。

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