SVG与ReactJS一起使用变量

Question

Is there a way to use variables with SVG in ReactJS? I want to draw a polyline, but the points always differ, so I could use variables for the points, but I can't seem to figure it out.

Answer 1

There's nothing special you need to do to draw SVG in react, just render it like any other JSX and use dynamic values (or values from props ) if you need to:

render() {
  const cx = 10
  const cy = 10
  const r = 20

  return (
    <svg>
      <circle cx={cx} cy={cy} r={r} fill="red" />
    </svg>
  )
}