In diesem Artikel geht es hauptsächlich um die Verwendung von Attributen in Reagieren sowie um die Verwendung von Reaktionsereignissen und das Teilen. Als Nächstes lesen wir diesen Artikel
Erklären Sie den Hauptinhalt dieses Artikels Verwendung von Attributen in React, der Erwerb von React-spezifischen Tags und die Verwendung von React-Sharing usw. Die Details sind wie folgt:
React's State-Attribut
Reacts Props-Attribut
React-Ereignisbindung und bidirektionale Interaktion von Daten
Wiederverwendung und Überprüfung von React-Komponenten
Refs von React-Komponenten
Gemeinsame Operations-Mixins zwischen unabhängigen React-Komponenten
Reacts Zustandsmaschine wird verwendet, um die Daten seines eigenen Moduls zu ändern.
Der Zustandsbereich gehört nur zur aktuellen Klasse und wird nicht verschmutzt andere Module;
Initialisierung: this.state = {Benutzername: „XXX“};
Die initialisierte Statuseinstellung wird im Konstruktor platziert ;
Status ändern: this.setState({Benutzername: „AAA“});
Zusammenfassung: Status ist die Einstellung des Moduls eigene Attribute.
Requisiten sind externe Attribute für das Modul (Datentransfer auf Eltern-Kind-Ebene)
Die Übergabemethode erfordert Parametereinstellungen;
wird im Empfangsmodul verwendet: this.props.xxx;
Der erste Weg: Binden Sie dies im Konstruktor: this.focus = this.focus (this);
oder Aufrufbindung: onClick={this.focus.bind(this,99)}
(dieser im Bindungswert wird zum Binden der Vorlage verwendet, 99 wird für die Parameterübertragung verwendet)
Übergeordnete Seite übergibt an untergeordnete Seite (es5 folgt)
Untergeordnete Seite übergibt Parameter an übergeordnete Seite
Übergeben Sie auf der untergeordneten Seite die Parameter zwischen Gruppen, indem Sie die von der übergeordneten Seite übergebenen Ereignis-Requisiten aufrufen
Verwenden Sie das onChange-Ereignis für die Echtzeitüberwachung
Traditionelle AJAX-Methode
Versprechen bereitgestellt von ES6
promise.then( null, function( reason ){ /* rejection */} );// 等价于promise.catch( function( reason ){ /* rejection */} );
Versprechen von ES6 – verwenden Sie Fetch, um HTTP-Anfragen zu implementieren
fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type + "&count=" + this.props.count, myFetchOptions).then(response => response.json()).then(json => this.setState({news: json}));
Methode 1: consttypes = {userid: React.PropTypes.number.isRequired}; BodyIndex.propTypes =types;
Methode 2 : BodyIndex.propTypes = { userid: React.PropTypes.number.isRequired };
Hinweis: propTypes erfordert eine Installationsumgebung nach Version v15.5, um verwendet zu werden:npm install prop-types –save
Eingeführt wie folgt: PropTypes aus „prop-types“ importieren;
Use BodyIndex.propTypes = { userid: PropTypes.number.isRequired };
Definition: const defaultNum = {username: "Default name"};
Verwenden Sie: BodyIndex.defaultProps = defaultNum; (Wenn Sie mehr sehen möchten, gehen Sie zur chinesischen PHP-Website React reference Learn in der Spalte des Handbuchs)
<BodyChild {...this.props} sex={"XXX}/>
Methode 1: Ursprünglicher Weg, um Tags zu erhalten: var myButton = document.getElementById(“submitButton”); myButton.style.color = “red”;
Methode Zwei: Legen Sie das Ref-Attribut für die Bezeichnung fest: <input ref="submitButton" type="button" value="提交数据"/>
; >
Plugin importieren:
ReactMixin aus „react-mixin“ importieren ;
Weisen Sie die gemeinsame Objektsammlung MixinLog dem aktuellen Komponentenprototyp zu: ReactMixin(BodyIndex.prototype, MixinLog);
Erstellen Sie Funktionsaufrufe, die unterschiedlichen Anforderungen entsprechen. Das ist es, wie zum Beispiel: MixinLog.log().
Eigenschaften: hat einen ähnlichen Lebenszyklus wie die Seite und wird nach mehrmaligem Aufruf mehrmals ausgeführt.
Dieser Artikel gibt hauptsächlich eine kurze Einführung in die Verwendung der Statusattribute und die Komponentenüberprüfung und -wiederverwendung. Sie können die Software herunterladen. Gehen Sie durch Navigieren Sie zum aktuellen Ordner im Befehlsfeld und führen Sie dann „npm install“ aus, um alle Umgebungen zu installieren. Führen Sie nach Abschluss der Installation „webpack –watch“ aus und das Projekt ist zur Ausführung bereit.
Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die Spalte „React User Manual“ der PHP-Website, um mehr zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen). .
Das obige ist der detaillierte Inhalt vonWas sind die React-Eigenschaften? Ausführliche Erläuterung zur Verwendung von Reaktionsattributen, Ereignissen und Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!