组件不会在地图功能上渲染

Question

I'm using this component progress to draw a progress line. It works when I hardcode the values, but when I use it inside a map function it does not pick up the values.

Can someone explain why this doesn't work?.

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

You missed the return statement:

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

Your render needs a 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" /> 
}

The elements.map() isn't a single value, so, you should not use it inside {} . Just return the map on your render() method

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}"/>

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