Zum Beispiel könnten Sie eine Anweisung in eckiger Form haben:
%Vor%Und implementieren Sie so:
%Vor%Es scheint kein Äquivalent in React zu geben, das ich nach dem Lesen der meisten Dokumente und des Googles gesehen habe. Ich hatte auf etwas wie:
gehofft %Vor%Gibt es so etwas wie das, was ich vermisst habe? Gibt es ein anderes, aber funktionell ähnliches Äquivalent? Oder vielleicht zeigt diese Frage nur, dass mir ein Teil des "Reaktionsweges" fehlt und ich sollte das niemals tun wollen. Danke!
Es wird hilfreich sein, darüber nachzudenken, was Angular und React jeweils "hinter den Kulissen" tun.
Wenn Sie in Ihrem Angular-Beispiel <div classy/></div> schreiben, sagen Sie: "Rendern Sie ein DIV-Element und fügen Sie ihm dann die durch die classy -Direktive definierten Verhaltensweisen an."
Wenn Sie in Ihrem React-Beispiel <MyComponent classy></MyComponent> schreiben, sagen Sie: "Erstellen Sie eine Instanz von MyComponent und übergeben Sie ihr die Props { classy: true } . Der transpiler (Babel oder whathaveyou) wird es in das folgende JavaScript umwandeln:
Die Antwort auf Ihre Frage ist also, dass Sie <MyComponent classy></MyComponent> nicht schreiben können, weil MyComponent component nicht weiß, was Sie mit der classy prop machen sollen. In React könnten Sie stattdessen so etwas schreiben:
Das funktioniert, weil wir wissen, dass die React.DOM.div -Komponente (wie die meisten DOM-Komponenten) weiß, was mit der className -Stütze zu tun ist.
Seit React 0.14 können wir etwas einfacher ausgedrückt als eine "reine" zustandslose funktionale Komponente ausdrücken, d. h. eine Funktion, die Requisiten akzeptiert und das gerenderte Ergebnis zurückgibt:
%Vor%Sie können beide Ansätze in Aktion im folgenden Ausschnitt sehen.
Ein großartiges Beispiel für eine nützliche Anweisung in eckigen ist
%Vor%Die smoothScroll-Anweisung würde das click-Ereignis abfangen und dann window scroll oder jquery scrollTo verwenden, um alle Arten von Animationen anzuwenden.
Überall im HTML könnte man dann einfach den powered Klassennamen der Anweisung verwenden.
Diese Art von Sache ist in React nicht verfügbar. Um dies in React zu tun, müssten Sie eine spezielle Link-Komponente erstellen, die statt:
verwendet wird %Vor%Tags und Links reactjs angularjs-directive