SVG與ReactJS一起使用變量

Question

有沒有辦法在ReactJS中將變量與SVG一起使用？ 我想畫一條折線，但是這些點總是不同的，所以我可以為這些點使用變量，但是我似乎無法弄清楚。

Answer 1

在反應中繪制SVG不需要做任何特殊的事情，只需像其他任何JSX一樣渲染它，並在需要時使用動態值（或props值）即可：

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

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