Liniendiagramm von Pure react.js

Question

Ich bin sehr neu zu react.js, ich möchte reagieren js, um ein Liniendiagramm ohne Verwendung anderer js-Datei vorzubereiten.
Ist es möglich, einen mit nur react.js zu erstellen?

Beispiele im Internet gezeigt hat D3 Komponenten, chart.js und so weiter. Ich bin mir nicht sicher, ob dies Unterprodukte von react.js sind. Ich möchte so viele js-Dateien wie möglich vermeiden und nur mit react.js gehen.

Answer 1

D3 und solche haben nichts mit React zu tun. D3 kann damit verwendet werden, wenn auch nicht vollständig (keine Animationen zum Beispiel), weil Sie in React das DOM nicht mutieren können, ohne eine Prop oder einen Zustand zu ändern. Wenn sich etwas auf Ihrer Seite ändert, ohne dass Sie es bemerken, erhalten Sie einen Fehler wie "Invariant violation: DOM mutierte unerwartet". Die Art und Weise, wie Sie mit D3 in React arbeiten, besteht darin, SVG-Elemente als Komponenten zu betrachten, genau wie alle anderen, die Sie in Ihrer App verwenden.

Sie brauchen keine D3, um das tatsächlich zu tun: Verwenden Sie einfach SVG-Elemente wie <svg>, <line> usw., als ob sie übliche Komponenten wären, um zu zeichnen, was auch immer Sie in einem div wollen. Siehe die SVG-Dokumente.

Für ein Liniendiagramm ist es definitiv machbar. Wenn Sie einen komplexen Graphen oder einen hübschen Graphen wünschen, dann verwenden Sie eine externe Bibliothek. Das Gewicht der js-Datei, die Sie importieren, kann mit dem Gewicht Ihres eigenen js-Codes verglichen werden, außer dass es tausend Mal weniger Bugs gibt.