React Native — Реквизит

В нашей последней главе мы показали вам, как использовать изменяемое состояние . В этой главе мы покажем вам, как сочетать состояние и реквизит .

Презентационные компоненты должны получать все данные, передавая реквизит . Только компоненты контейнера должны иметь состояние .

Контейнер Компонент

Теперь мы поймем, что такое контейнерный компонент, а также как он работает.

теория

Теперь мы обновим наш контейнерный компонент. Этот компонент будет обрабатывать состояние и передавать реквизиты в презентационный компонент.

Контейнерный компонент используется только для обработки состояния. Все функциональные возможности, относящиеся к представлению (стилизация и т. Д.), Будут обрабатываться в компоненте представления.

пример

Если мы хотим использовать пример из последней главы, нам нужно удалить элемент Text из функции рендеринга, поскольку этот элемент используется для представления текста пользователям. Это должно быть внутри презентационного компонента.

Давайте рассмотрим код в приведенном ниже примере. Мы импортируем PresentationalComponent и передадим его в функцию рендеринга.

После того, как мы импортируем PresentationalComponent и передадим его в функцию рендеринга, нам нужно передать реквизиты. Мы передадим реквизиты, добавив myText = {this.state.myText} и deleteText = {this.deleteText} в <PresentationalComponent> . Теперь мы сможем получить доступ к этому внутри презентационного компонента.

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

Презентационный компонент

Теперь мы поймем, что такое презентационный компонент, а также как он работает.

теория

Компоненты представления должны использоваться только для представления представления пользователям. Эти компоненты не имеют состояния. Они получают все данные и функции в качестве реквизита.

Лучше всего использовать как можно больше презентационных компонентов.

пример

Как мы упоминали в нашей предыдущей главе, мы используем синтаксис функции EC6 для презентационных компонентов.

Наш компонент будет получать реквизиты, возвращать элементы представления, представлять текст с помощью {props.myText} и вызывать функцию {props.deleteText}, когда пользователь нажимает на текст.

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

Теперь у нас есть та же функциональность, что и в нашей главе « Состояние» . Единственное отличие состоит в том, что мы реорганизовали наш код в контейнер и презентационный компонент.

Вы можете запустить приложение и увидеть текст, как на следующем скриншоте.

Если вы нажмете на текст, он будет удален с экрана.