React Native - Đạo cụ

Trong chương trước, chúng tôi đã hướng dẫn bạn cách sử dụng state. Trong chương này, chúng tôi sẽ chỉ cho bạn cách kết hợp trạng thái vàprops.

Các thành phần trình bày phải lấy tất cả dữ liệu bằng cách chuyển props. Chỉ các thành phần vùng chứa mới nên cóstate.

Thành phần vùng chứa

Bây giờ chúng ta sẽ hiểu thành phần vùng chứa là gì và cách nó hoạt động.

Học thuyết

Bây giờ chúng tôi sẽ cập nhật thành phần vùng chứa của chúng tôi. Thành phần này sẽ xử lý trạng thái và chuyển các đạo cụ cho thành phần trình bày.

Thành phần container chỉ được sử dụng cho trạng thái xử lý. Tất cả các chức năng liên quan đến chế độ xem (tạo kiểu, v.v.) sẽ được xử lý trong thành phần trình bày.

Thí dụ

Nếu chúng ta muốn sử dụng ví dụ từ chương cuối, chúng ta cần xóa Textphần tử từ hàm kết xuất vì phần tử này được sử dụng để trình bày văn bản cho người dùng. Điều này phải nằm bên trong thành phần trình bày.

Hãy để chúng tôi xem lại mã trong ví dụ dưới đây. Chúng tôi sẽ nhậpPresentationalComponent và chuyển nó cho hàm kết xuất.

Sau khi chúng tôi nhập PresentationalComponentvà truyền nó cho hàm render, chúng ta cần truyền đạo cụ. Chúng tôi sẽ chuyển các đạo cụ bằng cách thêmmyText = {this.state.myText}deleteText = {this.deleteText} đến <PresentationalComponent>. Bây giờ, chúng ta sẽ có thể truy cập điều này bên trong thành phần trình bày.

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

Thành phần thuyết trình

Bây giờ chúng ta sẽ hiểu thành phần trình bày là gì và cách nó hoạt động.

Học thuyết

Các thành phần trình bày chỉ nên được sử dụng để trình bày chế độ xem cho người dùng. Các thành phần này không có trạng thái. Chúng nhận tất cả dữ liệu và chức năng làm đạo cụ.

Cách tốt nhất là sử dụng càng nhiều thành phần trình bày càng tốt.

Thí dụ

Như chúng ta đã đề cập trong chương trước, chúng ta đang sử dụng cú pháp hàm EC6 cho các thành phần trình bày.

Thành phần của chúng tôi sẽ nhận được các đạo cụ, trả về các phần tử xem, trình bày văn bản bằng cách sử dụng {props.myText} và gọi cho {props.deleteText} chức năng khi người dùng nhấp vào văn bản.

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

Bây giờ, chúng tôi có chức năng tương tự như trong Statechương. Sự khác biệt duy nhất là chúng tôi đã cấu trúc lại mã của mình cho vùng chứa và thành phần trình bày.

Bạn có thể chạy ứng dụng và xem văn bản như trong ảnh chụp màn hình sau.

Nếu bạn nhấp vào văn bản, nó sẽ bị xóa khỏi màn hình.