Ich habe seit ein paar Tagen damit zu kämpfen und versucht, herauszufinden, wie ich darauf reagieren kann.

Grundsätzlich habe ich einen Baum, eine Liste von Listen (von Listen ...), die beliebig verschachtelt werden können, und ich möchte eine Komponente, die dies anzeigt und auch die Neuanordnung ermöglicht.

Hier sind meine Daten:

var data = [{
      id: 1
    }, {
      id: 2, children: [
        {
          id: 3, children: [{id: 6}]
        }, {
          id: 4
        }, {
          id: 5
        }]
    }]

Mein erster Durchgang bestand darin, nur eine einzige "Baum" -Komponente zu haben, die die verschachtelten Listen von DOM-Elementen in ihrer Renderfunktion erstellt (siehe Code hier). Das hat für eine kleine Anzahl von Elementen ziemlich gut funktioniert, aber ich möchte Hunderte von Elementen unterstützen können, und es gab sehr hohe Kosten für das erneute Rendern, wenn ein Element innerhalb des Baums verschoben wurde (~ 600 ms, wenn es einige hundert waren) Elemente).

Ich denke also, dass jeder "Knoten" des Baums eine eigene Instanz dieser Komponente sein wird. Aber hier ist meine Frage (Entschuldigung für das lange Intro):

Sollte jeder Knoten dynamisch die Liste seiner Kinder-IDs aus einer zentralen "Datenbank" abfragen und diese im Status speichern? Oder sollte der oberste Knoten den gesamten Baum laden und alles durch Requisiten weitergeben?

Ich versuche immer noch, mir Gedanken darüber zu machen, wie mit Status und Requisiten umgegangen und aufgeteilt werden soll.

Vielen Dank

16
Jared Forsyth 10 Dez. 2013 im 23:32

3 Antworten

Beste Antwort

Ich wollte die Baumstruktur mit React ausprobieren und fand eine einfache Komponente, die Teilbäume verbirgt, wenn Sie auf <h5> klicken. Alles ist ein TreeNode. Ist das ähnlich wie du gedacht hast?

Sie können es in Aktion in dieser JSFiddle sehen: http://jsfiddle.net/ssorallen/XX8mw/

TreeNode.jsx :

var TreeNode = React.createClass({
  getInitialState: function() {
    return {
      visible: true
    };
  },
  render: function() {
    var childNodes;
    if (this.props.node.childNodes != null) {
      childNodes = this.props.node.childNodes.map(function(node, index) {
        return <li key={index}><TreeNode node={node} /></li>
      });
    }

    var style = {};
    if (!this.state.visible) {
      style.display = "none";
    }

    return (
      <div>
        <h5 onClick={this.toggle}>
          {this.props.node.title}
        </h5>
        <ul style={style}>
          {childNodes}
        </ul>
      </div>
    );
  },
  toggle: function() {
    this.setState({visible: !this.state.visible});
  }
});

bootstrap.jsx :

var tree = {
  title: "howdy",
  childNodes: [
    {title: "bobby"},
    {title: "suzie", childNodes: [
      {title: "puppy", childNodes: [
        {title: "dog house"}
      ]},
      {title: "cherry tree"}
    ]}
  ]
};

React.render(
  <TreeNode node={tree} />,
  document.getElementById("tree")
);
26
Ross Allen 28 Apr. 2015 im 13:27

Hier ist ein kurzes Beispiel für das Erstellen einer Baumansicht mit React und Flux. http://www.syntaxsuccess.com/viewarticle/5510d81be1ce52d00e93da55

Die React-Komponente ist rekursiv und der Status wird mit Flux verwaltet.

-1
TGH 24 März 2015 im 04:05

Es scheint besser zu sein, alles als Requisiten weiterzugeben, da Sie dadurch nicht die Mühe haben, das individuelle Einfügen / Löschen zu verwalten. Wie in den Kommentaren erwähnt, verhindern die Attribute key einen großen Teil unnötigen erneuten Renderns.

Vielleicht möchten Sie diesen Link überprüfen: http: //facebook.github. io / react / blog / 2013/11/05 / thinking-in-react.html. Es beschreibt die Art von Dilemma, das Sie haben, und wie Sie es angehen.

(Zufälligerweise habe ich vor einiger Zeit eine Reaktionsbaumansicht erstellt: https://github.com/chenglou/react- Baumansicht. Nehmen Sie, was Sie wollen!)

5
chenglou 23 Dez. 2013 im 07:10