Hiểu Props trong React Native: truyền dữ liệu cho component

Sau khi hiểu component, bước tiếp theo là hiểu props. Nếu component là một khuôn mẫu giao diện, props là dữ liệu bạn đưa vào khuôn mẫu đó để nó hiển thị nội dung khác nhau.

Ví dụ bạn có một component ArticleCard. Card này có thể dùng cho nhiều bài viết khác nhau. Thứ thay đổi không phải cấu trúc card, mà là tiêu đề, mô tả, ảnh và category. Những dữ liệu đó nên được truyền qua props.

Props là gì?

Props là dữ liệu component cha truyền xuống component con. Component con nhận dữ liệu đó và dùng để render UI. Props giúp component tái sử dụng được thay vì bị “đóng cứng” nội dung.

import { Text, View } from 'react-native';

function Greeting({ name }) {
  return (
    <View>
      <Text>Xin chào {name}</Text>
    </View>
  );
}

export default function App() {
  return <Greeting name="AE Dev" />;
}

Ở đây, name là một prop. Component Greeting không cần biết tên cụ thể từ đầu. Nó chỉ biết: “ai truyền name vào thì mình hiển thị name đó”.

Props giúp component linh hoạt hơn

Hãy xem ví dụ gần với app blog hơn. Thay vì viết nhiều card khác nhau, ta tạo một component nhận dữ liệu qua props.

function ArticleCard({ title, description, category }) {
  return (
    <View style={styles.card}>
      <Text style={styles.category}>{category}</Text>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.description}>{description}</Text>
    </View>
  );
}

function ArticleList() {
  return (
    <>
      <ArticleCard
        category="React Native"
        title="Làm quen với Component"
        description="Chia UI thành các khối nhỏ, dễ tái sử dụng."
      />
      <ArticleCard
        category="Mobile Dev"
        title="Hiểu Props"
        description="Truyền dữ liệu từ component cha xuống component con."
      />
    </>
  );
}

Cùng một component ArticleCard, nhưng bạn có thể hiển thị nhiều bài khác nhau. Đây chính là sức mạnh của props.

Props đi một chiều

Một điểm rất quan trọng: props thường đi từ cha xuống con. Component con không nên tự sửa props. Nếu cần thay đổi dữ liệu, component cha nên giữ state rồi truyền state và hàm xử lý xuống con.

Cách đi một chiều này giúp app dễ đoán hơn. Khi dữ liệu hiển thị sai, bạn có thể lần ngược lên component cha để xem dữ liệu bắt đầu từ đâu.

Đặt tên props sao cho dễ hiểu

Props nên có tên gần với ý nghĩa thực tế. Ví dụ title, subtitle, onPress, isLoading, disabled dễ hiểu hơn nhiều so với data, value1, flag.

Nếu dùng TypeScript, bạn nên mô tả rõ kiểu dữ liệu của props. Điều này giúp editor gợi ý tốt hơn và giảm lỗi truyền nhầm dữ liệu.

type ArticleCardProps = {
  title: string;
  description: string;
  category: string;
  onPress?: () => void;
};

function ArticleCard(props: ArticleCardProps) {
  return (
    <Pressable onPress={props.onPress}>
      <Text>{props.title}</Text>
      <Text>{props.description}</Text>
    </Pressable>
  );
}

Lỗi thường gặp

Lỗi đầu tiên là truyền quá nhiều props khiến component khó dùng. Khi một component có quá nhiều props, có thể nó đang làm quá nhiều việc. Lỗi thứ hai là truyền cả object rất lớn nhưng component chỉ dùng vài field. Lỗi thứ ba là sửa props trực tiếp trong component con.

Kết luận

Props giúp component có thể tái sử dụng với nhiều dữ liệu khác nhau. Nếu component là khuôn, props là nội dung đổ vào khuôn đó. Hiểu props tốt sẽ giúp bạn viết UI sạch hơn và chuẩn bị tốt cho bước tiếp theo: state.

Nguồn tham khảo: React: Passing Props to a Component.