ReactJS - Komponenten-API

In diesem Kapitel wird die React-Komponenten-API erläutert. Wir werden drei Methoden diskutieren:setState(), forceUpdate und ReactDOM.findDOMNode(). In neuen ES6-Klassen müssen wir dies manuell binden. Wir werden verwendenthis.method.bind(this) in den Beispielen.

Status festlegen

setState()Methode wird verwendet, um den Status der Komponente zu aktualisieren. Diese Methode ersetzt nicht den Status, sondern fügt nur Änderungen zum ursprünglichen Status hinzu.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data: []
      }
	
      this.setStateHandler = this.setStateHandler.bind(this);
   };
   setStateHandler() {
      var item = "setState..."
      var myArray = this.state.data.slice();
	  myArray.push(item);
      this.setState({data: myArray})
   };
   render() {
      return (
         <div>
            <button onClick = {this.setStateHandler}>SET STATE</button>
            <h4>State Array: {this.state.data}</h4>
         </div>
      );
   }
}
export default App;

Wir haben mit einem leeren Array begonnen. Jedes Mal, wenn wir auf die Schaltfläche klicken, wird der Status aktualisiert. Wenn wir fünfmal klicken, erhalten wir die folgende Ausgabe.

Update erzwingen

Manchmal möchten wir die Komponente möglicherweise manuell aktualisieren. Dies kann mit dem erreicht werdenforceUpdate() Methode.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
   };
   forceUpdateHandler() {
      this.forceUpdate();
   };
   render() {
      return (
         <div>
            <button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
            <h4>Random number: {Math.random()}</h4>
         </div>
      );
   }
}
export default App;

Wir legen eine Zufallszahl fest, die jedes Mal aktualisiert wird, wenn auf die Schaltfläche geklickt wird.

Suchen Sie den Dom-Knoten

Für die DOM-Manipulation können wir verwenden ReactDOM.findDOMNode()Methode. Zuerst müssen wir importierenreact-dom.

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor() {
      super();
      this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
   };
   findDomNodeHandler() {
      var myDiv = document.getElementById('myDiv');
      ReactDOM.findDOMNode(myDiv).style.color = 'green';
   }
   render() {
      return (
         <div>
            <button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
            <div id = "myDiv">NODE</div>
         </div>
      );
   }
}
export default App;

Die Farbe von myDiv Das Element wird grün, sobald auf die Schaltfläche geklickt wird.

Note - Seit dem 0.14-Update sind die meisten älteren Komponenten-API-Methoden veraltet oder wurden entfernt, um ES6 zu unterstützen.