ReactJS - Requisitenübersicht

Der Hauptunterschied zwischen Staat und Requisiten ist der propssind unveränderlich. Aus diesem Grund sollte die Containerkomponente den Status definieren, der aktualisiert und geändert werden kann, während die untergeordneten Komponenten nur Daten aus dem Status mithilfe von Requisiten übergeben sollten.

Requisiten verwenden

Wenn wir unveränderliche Daten in unserer Komponente benötigen, können wir einfach Requisiten hinzufügen reactDOM.render() Funktion in main.js und verwenden Sie es in unserer Komponente.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

Dies führt zu folgendem Ergebnis.

Standard Requisiten

Sie können Standardeigenschaftswerte auch direkt im Komponentenkonstruktor festlegen, anstatt sie dem hinzuzufügen reactDom.render() Element.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Die Ausgabe ist dieselbe wie zuvor.

Staat und Requisiten

Das folgende Beispiel zeigt, wie man kombiniert stateund Requisiten in Ihrer App. Wir setzen den Status in unserer übergeordneten Komponente und übergeben ihn mithilfe von an den Komponentenbaumprops. In derrender Funktion setzen wir headerProp und contentProp in untergeordneten Komponenten verwendet.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         header: "Header from props...",
         content: "Content from props..."
      }
   }
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Das Ergebnis wird wieder das gleiche sein wie in den beiden vorherigen Beispielen. Das einzige, was sich unterscheidet, ist die Quelle unserer Daten, die jetzt ursprünglich aus dem state. Wenn wir es aktualisieren möchten, müssen wir nur den Status aktualisieren, und alle untergeordneten Komponenten werden aktualisiert. Mehr dazu im Kapitel Events.