## Giới thiệu Trong thời đại hiện nay, React là thư viện JavaScript phổ biến nhất để xây dựng ứng dụng một trang. Tất cả các ứng dụng trong React được xây dựng bằng các thành phần. Sử dụng props, bạn có thể gửi dữ liệu từ thành phần này sang thành phần khác. Dữ liệu được truyền theo hướng đơn, có nghĩa là dữ liệu chảy từ cha đến con. Trong bài viết này, chúng ta sẽ thảo luận về cách truyền dữ liệu giữa các thành phần bằng cách sử dụng props trong React và các thực tiễn tốt nhất khi làm việc với chúng. ## Props trong React Props còn được gọi là thuộc tính. Nó chỉ thực hiện các thao tác đọc; bạn không thể trực tiếp sửa đổi thành phần con. Với việc sử dụng props, chúng ta có thể truyền dữ liệu từ hàm đến các thành phần con, xây dựng thành phần một cách linh hoạt hơn và làm cho nó có thể sử dụng lại. **Cú pháp:** ```javascript const Greeting = ({ name, age }) => (

Xin chào, tôi tên là {name} và tôi {age} tuổi.

); ``` **Ví dụ Mã:** ```javascript import React, { Component } from "react"; class Greeting extends Component { render() { return

Xin chào, {this.props.name}!

; } } class App extends Component { render() { return (

); } } export default App; ``` **Kết quả:** `Xin chào, John! Xin chào, Alice!` ## Dữ liệu chảy trong React React sử dụng dữ liệu một chiều, có nghĩa là dòng dữ liệu đơn hướng. Nó có thể gửi dữ liệu từ các thành phần cha đến con. Dưới đây là một số điểm được mô tả chi tiết: **1) Quản lý dữ liệu cục bộ:** Mỗi thành phần chứa trạng thái riêng của nó để xử lý dữ liệu. Nó được quản lý bởi chính thành phần đó. **Ví dụ Mã:** ```javascript import React, { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return (

Đếm: {count}

); } export default Counter; ``` **Kết quả:** **2) Props gửi dữ liệu xuống:** Props được sử dụng như một tham số để truyền vào hàm. Nó không thể được sửa đổi bởi các thành phần con vì chúng chỉ là đọc. **Ví dụ Mã:** ```javascript function Child({ msg }) { return

{msg}

; } function Parent() { return ; } ``` **3) Props gửi dữ liệu từ thành phần cha đến thành phần con:** Với việc sử dụng props, bạn có thể dễ dàng gửi dữ liệu từ thành phần cha đến thành phần con. Nếu bạn muốn gửi dữ liệu từ thành phần con đến thành phần cha, bạn có thể gửi qua hàm callback. **Ví dụ Mã:** ```javascript import React from "react"; function Greet(props) { return

{props.message}

; } function App() { return (

); } export default App; ``` **Kết quả:** `Chào mừng đến với React! Props giúp các thành phần có thể sử dụng lại.` **4) Props gửi dữ liệu từ thành phần con đến thành phần cha:** Trong React, thành phần con gửi dữ liệu đến thành phần cha thông qua việc sử dụng hàm callback. **Ví dụ Mã:** ```javascript import React, { useState } from "react"; function Child({ sendData }) { return (

); } function Parent() { const [fruit, setFruit] = useState(""); return (

Trái cây đã chọn: {fruit}

); } export default Parent; ``` **Kết quả:** ## Truyền các loại dữ liệu khác nhau dưới dạng Props Props rất hữu ích để gửi bất kỳ loại dữ liệu nào, được mô tả chi tiết dưới đây: **1) Mảng:** Trong mảng, sử dụng phương thức .map() để gửi dữ liệu đến thành phần con. **Ví dụ Mã:** ```javascript import React from "react"; function Student({ name, age }) { return (

Tên: {name}

Tuổi: {age}

); } function App() { return (

); } export default App; ``` **Kết quả:** `Tên: John Tuổi: 22 Tên: Sara Tuổi: 20 Tên: Mike Tuổi: 25` **2) Chuỗi:** Dữ liệu có thể được gửi qua dấu ngoặc kép (“ “) hoặc dấu ngoặc nhọn {}. **Ví dụ Mã:** ```javascript import React from "react"; import ReactDOM from "react-dom/client"; function Profile({ user }) { return (

{user.name}

Tuổi: {user.age}

Thành phố: {user.city}

); } function App() { const users = [ { name: "John", age: 25, city: "New York" }, { name: "Sara", age: 22, city: "London" }, { name: "Mike", age: 30, city: "Paris" } ]; return (

Hồ sơ người dùng

{users.map((user, index) => ( ))}

); } export default App; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` **Kết quả:** `Hồ sơ người dùng John Tuổi: 25 Thành phố: New York Sara Tuổi: 22 Thành phố: London Mike Tuổi: 30 Thành phố: Paris` **3) Số:** Nó có thể được truyền qua dấu ngoặc nhọn {}. **Ví dụ Mã:** ```javascript import React from "react"; import ReactDOM from "react-dom/client"; function Square({ number }) { return

Bình phương của {number} là {number * number}

; } function App() { return (

); } export default App; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` **Kết quả:** `Bình phương của 2 là 4 Bình phương của 5 là 25 Bình phương của 10 là 100` ## Thực hành tốt nhất với Props: Props được sử dụng cho các thao tác chỉ đọc, với tên rõ ràng và có cấu trúc. Một số điểm chính dưới đây: * Chúng được sử dụng cho dữ liệu chỉ đọc và dữ liệu tĩnh. * Props được quản lý trong các dự án lớn, chẳng hạn như kiểm tra xác thực props. * Props sử dụng tên rõ ràng và có cấu trúc. ## Kết luận Bài viết này cung cấp cái nhìn sâu sắc hơn về props trong React và cách gửi dữ liệu giữa các thành phần từ cơ bản đến nâng cao. Props cho phép các thành phần con giao tiếp với các thành phần cha. Nếu bạn thành thạo trong việc sử dụng props, bạn có thể xử lý sự kiện giữa các thành phần và gửi tất cả các loại dữ liệu như số, chuỗi, hàm, v.v. Tôi khuyên bạn nên học ReactJS từ trang web công nghệ Tpoint, vì nó cung cấp các bài học React.js, câu hỏi phỏng vấn và tất cả các chủ đề công nghệ khác bằng ngôn ngữ dễ hiểu.

Bài viết về chủ đề#reactprops

Tổng hợp các bài viết về #reactprops

React Props: Cách truyền dữ liệu giữa các thành phần#tutorial#programming#react#reactprops

Chủ đề phổ biến

React Props: Cách truyền dữ liệu giữa các thành phần