Wie setzt man das Attribut für jedes SVG-Element in der Renderfunktion dynamisch?

Question

Ich habe eine Komponente, die eine Karte der Vereinigten Staaten zu machen, angenommen hat:

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>); 
    } 
} 

ich meine Entwicklung neuer Anwendungen mit Typoskript mit reagieren. Ich möchte einige Attribute von SVG-Elementen (z. B. Füllung) dynamisch basierend auf der ID des Elements (das den betreffenden US-Bundesstaat darstellt) setzen. Was ich tun könnte, ist für jedes Element explizit seine ID zu verwenden:

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

aber ich müsste manuell jeden Pfad/rect Element jedes Mal wenn ich etwas ändern wollte ändern. Gibt es eine Möglichkeit, die aktuelle Element-ID dynamisch an die getStateColor-Funktion zu übergeben? Oder gibt es eine andere Möglichkeit, auf jedes Pfad-/Rect-Element zu verweisen, so dass ich alle US-Bundesstaaten basierend auf der getStateColor-Definition farbig festlegen könnte?

Answer 1

Die Art, wie Sie es gerade tun, ist der richtige Weg. Da React DOM diffing (or reconciliation) nicht wirklich das gesamte Browser-DOM bei jeder kleinen Änderung erzeugt, aktualisiert es nur das vorhandene Dokument, um zu entsprechen, was render generiert.

Alle Versuche, das DOM außerhalb von React zu ändern, funktionieren nicht wie erwartet, da React diese Änderungen nicht kennt und sie überschreibt.