Native reagieren - Requisiten

In unserem letzten Kapitel haben wir Ihnen gezeigt, wie Sie veränderlich verwenden state. In diesem Kapitel zeigen wir Ihnen, wie Sie den Status und den Status kombinierenprops.

Präsentationskomponenten sollten alle Daten durch Übergabe erhalten props. Nur Behälterkomponenten sollten habenstate.

Containerkomponente

Wir werden nun verstehen, was eine Containerkomponente ist und wie sie funktioniert.

Theorie

Jetzt werden wir unsere Containerkomponente aktualisieren. Diese Komponente behandelt den Status und übergibt die Requisiten an die Präsentationskomponente.

Die Containerkomponente wird nur für den Bearbeitungsstatus verwendet. Alle Funktionen in Bezug auf die Ansicht (Styling usw.) werden in der Präsentationskomponente behandelt.

Beispiel

Wenn wir ein Beispiel aus dem letzten Kapitel verwenden möchten, müssen wir das entfernen TextElement aus der Renderfunktion, da dieses Element zum Präsentieren von Text für die Benutzer verwendet wird. Dies sollte innerhalb der Präsentationskomponente liegen.

Lassen Sie uns den Code im folgenden Beispiel überprüfen. Wir werden die importierenPresentationalComponent und übergeben Sie es an die Renderfunktion.

Nachdem wir die importiert haben PresentationalComponentund übergeben Sie es an die Render-Funktion, müssen wir die Requisiten übergeben. Wir werden die Requisiten durch Hinzufügen übergebenmyText = {this.state.myText} und deleteText = {this.deleteText} zu <PresentationalComponent>. Jetzt können wir innerhalb der Präsentationskomponente darauf zugreifen.

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
      officia deserunt mollit anim id est laborum.'
   }
   updateState = () => {
      this.setState({ myState: 'The state is updated' })
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState} updateState = {this.updateState}/>
         </View>
      );
   }
}

Präsentationskomponente

Wir werden nun verstehen, was eine Präsentationskomponente ist und wie sie funktioniert.

Theorie

Präsentationskomponenten sollten nur zum Präsentieren der Ansicht für die Benutzer verwendet werden. Diese Komponenten haben keinen Status. Sie erhalten alle Daten und Funktionen als Requisiten.

Die beste Vorgehensweise besteht darin, so viele Präsentationskomponenten wie möglich zu verwenden.

Beispiel

Wie bereits in unserem vorherigen Kapitel erwähnt, verwenden wir die EC6-Funktionssyntax für Präsentationskomponenten.

Unsere Komponente erhält Requisiten, gibt Ansichtselemente zurück und präsentiert Text mit {props.myText} und rufen Sie die {props.deleteText} Funktion, wenn ein Benutzer auf den Text klickt.

PresentationalComponent.js

import React, { Component } from 'react'
import { Text, View } from 'react-native'

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text onPress = {props.updateState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

Jetzt haben wir die gleiche Funktionalität wie in unserem StateKapitel. Der einzige Unterschied besteht darin, dass wir unseren Code auf den Container und die Präsentationskomponente umgestaltet haben.

Sie können die App ausführen und den Text wie im folgenden Screenshot sehen.

Wenn Sie auf Text klicken, wird dieser vom Bildschirm entfernt.