render関数の各svg要素に属性を動的に設定するにはどうすればよいですか？

Question

私は米国のマップをレンダリングするはずのコンポーネントがあります：私は活字体と反応して使用して自分のアプリケーションを設計してい

import * as React from "react"; 

export class UsMap extends React.Component<{}, {}> { 
    constructor(props: IAvatorialMapProps) { 
     super(props); 
    } 

    getStateColor(id: string): string { 
     if (id == "Alabama") 
      return "rgba(213, 213, 213)"; 
     else 
      return "rgba(156, 156, 156)"; 
    } 

    render() { 
     return (<svg className="UsMap" width="580" height="400" xmlns="http://www.w3.org/2000/svg"> 
      <g> 
       <path id="Alabama" d="..."><title>Alabama</title></path> 
       . 
       . 
       . 
       <rect id="Washington D.C."><title>Washington D.C.</title></rect> 
      </g> 
     </svg>); 
    } 
} 

を。私がしたいのは、要素のid（問題の米国の国家を表す）に基づいて、SVG要素のいくつかの属性（fillなど）を動的に設定することです。

<path id="Alabama" fill={this.getStateColor("Alabama")} d="..."><title>Alabama</title></path> 

が、私は手動で私が何かを変更したい各パス/ RECT要素毎回変更する必要があります。各要素は、明示的にそのIDを使用するために私は何を行う可能性はあります。現在の要素idをgetStateColor関数に動的に渡す方法はありますか？または、各パス/矩形要素を参照できる他の方法があるので、getStateColor定義に基づいて米国の州をすべて設定することができます。

Answer 1

あなたが現在行っているやり方は正しい方法です。 ReactはDOM diffing (or reconciliation)を実行するので、わずかな変更が発生するたびにブラウザDOM全体が実際に生成されることはありません。既存ドキュメントは、renderが生成するものと一致するように更新されます。

Reactの外部でDOMを変更しようとすると、Reactがこれらの変更を知らずに上書きされるため、期待通りに動作しません。