네이티브 반응-소품

지난 장에서 우리는 변경 가능한 state. 이 장에서는 상태와props.

프레젠테이션 구성 요소는 전달하여 모든 데이터를 가져와야합니다. props. 컨테이너 구성 요소 만state.

컨테이너 구성 요소

이제 컨테이너 구성 요소가 무엇이며 어떻게 작동하는지 이해할 것입니다.

이론

이제 컨테이너 구성 요소를 업데이트합니다. 이 구성 요소는 상태를 처리하고 프리젠 테이션 구성 요소에 소품을 전달합니다.

컨테이너 구성 요소는 상태 처리에만 사용됩니다. 보기 (스타일링 등)와 관련된 모든 기능은 프레젠테이션 구성 요소에서 처리됩니다.

예

지난 장의 예제를 사용하려면 Text이 요소는 사용자에게 텍스트를 표시하는 데 사용되므로 render 함수의 요소입니다. 이는 프리젠 테이션 구성 요소 내부에 있어야합니다.

아래의 예제에서 코드를 검토해 보겠습니다. 우리는 수입 할 것입니다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

이제 우리는 State장. 유일한 차이점은 코드를 컨테이너와 프레젠테이션 구성 요소로 리팩토링했다는 것입니다.

앱을 실행하고 다음 스크린 샷과 같이 텍스트를 볼 수 있습니다.

텍스트를 클릭하면 화면에서 제거됩니다.