React Native – Bài 5: Props

By quangvu

Posted on January 1, 2023

9 min read

127

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

Các thành phần trình bày sẽ nhận được 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 có state .

Container Component

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

Lý thuyết

Bây giờ bạn sẽ cập nhật container component của mình. Thành phần này sẽ xử lý state và chuyển các props cho component .

container component chỉ được sử dụng để xử lý trạng thái. 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 component trình bày.

Ví dụ

Nếu muốn sử dụng ví dụ từ chương trước, chúng ta cần xóa phần tử Text khỏi render function 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 nên ở bên trong thành phần trình bày.

Hãy xem xét mã trong ví dụ dưới đây. Chúng ta sẽ nhập PresentationalComponent và chuyển nó vào render function.

Sau khi chúng tôi nhập PresentationalComponent và chuyển nó vào render function, chúng tôi cần chuyển các props . Chúng tôi sẽ chuyển các props bằng cách thêm myText = {this.state.myText} và deleteText = {this.deleteText} vào <PresentationalComponent> . Bây giờ, chúng ta sẽ có thể truy cập cái 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>
      );
   }
}

Presentational Component

Bây giờ chúng ta sẽ hiểu Presentational Component là gì và nó hoạt động như thế nào.

Lý thuyết

Các Presentational Component 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. Họ nhận tất cả dữ liệu và chức năng dưới dạng props .

Cách tốt nhất là sử dụng càng nhiều Presentational Component càng tốt.

Ví dụ

Như đã đề cập trong chương trước, chúng ta đang sử dụng cú pháp hàm EC6 cho các Presentational Component.

Component sẽ nhận các props , trả về các View Component , trình bày văn bản bằng cách sử dụng {props.myText} và gọi hàm {props.deleteText} 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ức năng tương tự như trong chương State. Sự khác biệt duy nhất là chúng tôi đã tái cấu trúc mã của mình thành container và Presentational Component.

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.