React Native - Rekwizyty

W naszym ostatnim rozdziale pokazaliśmy, jak używać mutable state. W tym rozdziale pokażemy, jak połączyć stan iprops.

Komponenty prezentacyjne powinny pobierać wszystkie dane przez przekazanie props. Tylko elementy pojemnika powinny miećstate.

Komponent kontenera

Teraz zrozumiemy, czym jest komponent kontenera i jak działa.

Teoria

Teraz zaktualizujemy nasz komponent kontenera. Ten komponent obsłuży stan i przekaże właściwości do komponentu prezentacji.

Komponent kontenera jest używany tylko do obsługi stanu. Wszystkie funkcje związane z widokiem (stylizacją itp.) Będą obsługiwane w komponencie prezentacyjnym.

Przykład

Jeśli chcemy użyć przykładu z ostatniego rozdziału, musimy usunąć rozszerzenie Textelement z funkcji render, ponieważ ten element służy do prezentowania tekstu użytkownikom. Powinien znajdować się wewnątrz komponentu prezentacji.

Przyjrzyjmy się kodowi w przykładzie podanym poniżej. Zaimportujemy plikPresentationalComponent i przekaż go do funkcji renderującej.

Po zaimportowaniu PresentationalComponenti przekazać to do funkcji renderującej, musimy przekazać właściwości. Rekwizyty przejdziemy przez dodaniemyText = {this.state.myText} i deleteText = {this.deleteText} do <PresentationalComponent>. Teraz będziemy mieć dostęp do tego w komponencie prezentacji.

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>
      );
   }
}

Komponent prezentacyjny

Teraz zrozumiemy, czym jest komponent prezentacyjny i jak działa.

Teoria

Komponenty prezentacyjne powinny być używane tylko do prezentacji widoku użytkownikom. Te składniki nie mają stanu. Otrzymują wszystkie dane i funkcje jako rekwizyty.

Najlepszą praktyką jest użycie jak największej liczby elementów prezentacji.

Przykład

Jak wspomnieliśmy w poprzednim rozdziale, używamy składni funkcji EC6 dla komponentów prezentacyjnych.

Nasz komponent otrzyma rekwizyty, zwróci elementy widoku, przedstawi tekst za pomocą {props.myText} i zadzwoń do {props.deleteText} działają, gdy użytkownik kliknie tekst.

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

Teraz mamy taką samą funkcjonalność jak w naszym Staterozdział. Jedyna różnica polega na tym, że refaktoryzowaliśmy nasz kod do kontenera i komponentu prezentacyjnego.

Możesz uruchomić aplikację i zobaczyć tekst jak na poniższym zrzucie ekranu.

Jeśli klikniesz na tekst, zostanie on usunięty z ekranu.