组件不会在地图功能上呈现

Question

我正在使用此组件 progress 来绘制进度线。当我对值进行硬编码时它可以工作，但是当我在 map 函数中使用它时它不会获取值。

有人可以解释为什么这不起作用吗？

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) => 
      <Line percent="{obj.percent}" strokeWidth="6" strokeColor="{obj.color}" trailWidth="6" /> 
   )}
)
}

Answer 1

您错过了 return 声明：

render(){ 

  const elements = [{'percent':10,'color':'#3FC7FA'}, {'percent':30,'color':'#85D262'},{'percent':80,'color': '#FE8C6A'}]
  return elements.map((obj) => 
      <Line percent="{obj.percent}" strokeWidth="6" strokeColor="{obj.color}" trailWidth="6" /> 
   )
}

Answer 2

您的渲染需要 return

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) => 
        <Line percent={obj.percent} strokeWidth="6" strokeColor={obj.color} trailWidth="6" /> 
}

elements.map() 不是一个单独的值，因此，您不应在 {} 中使用它。只是 return 你的 render() 方法

上的地图

Pay atention: if you want to pass variables to your components props, don't use quotes. Do this: <Line percent={obj.percent}/> instead of <Line percent="{obj.percent}"/>

看看https://reactjs.org/docs/components-and-props.html#rendering-a-component

组件不会在地图功能上呈现

Component Won't Render on Map Function

javascript

arrays

logic

array-map

reactjs