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 }) => ( <h2>Xin chào, tôi tên là {name} và tôi {age} tuổi.</h2> );Ví dụ
Mã:
javascript
import React, { Component } from "react";
class Greeting extends Component {
render() {
return <h2>Xin chào, {this.props.name}!</h2>;
}
}
class App extends Component {
render() {
return (
<div>
<Greeting name="John" />
<Greeting name="Alice" />
</div>
);
}
}
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 (
<div>
<p>Đếm: {count}</p>
<button onClick={() => setCount(count + 1)}>Tăng</button>
<button onClick={() => setCount(count - 1)}>Giảm</button>
</div>
);
}
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 <h2>{msg}</h2>;
}
function Parent() {
return <Child msg="Xin chào từ Cha" />;
}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 <h2>{props.message}</h2>;
}
function App() {
return (
<div>
<Greet message="Chào mừng đến với React!" />
<Greet message="Props giúp các thành phần có thể sử dụng lại." />
</div>
);
}
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 (
<div>
<button onClick={() => sendData("Táo")}>Gửi Táo</button>
<button onClick={() => sendData("Chuối")}>Gửi Chuối</button>
</div>
);
}
function Parent() {
const [fruit, setFruit] = useState("");
return (
<div>
<h2>Trái cây đã chọn: {fruit}</h2>
<Child sendData={setFruit} />
</div>
);
}
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 (
<div>
<h3>Tên: {name}</h3>
<p>Tuổi: {age}</p>
</div>
);
}
function App() {
return (
<div>
<Student name="John" age={22} />
<Student name="Sara" age={20} />
<Student name="Mike" age={25} />
</div>
);
}
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 (
<div>
<h2>{user.name}</h2>
<p>Tuổi: {user.age}</p>
<p>Thành phố: {user.city}</p>
</div>
);
}
function App() {
const users = [
{ name: "John", age: 25, city: "New York" },
{ name: "Sara", age: 22, city: "London" },
{ name: "Mike", age: 30, city: "Paris" }
];
return (
<div>
<h1>Hồ sơ người dùng</h1>
{users.map((user, index) => (
<Profile key={index} user={user} />
))}
</div>
);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);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 <h2>Bình phương của {number} là {number * number}</h2>;
}
function App() {
return (
<div>
<Square number={2} />
<Square number={5} />
<Square number={10} />
</div>
);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);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.
