Tiếp tục series học ReactJS thì trong bài viết này, mình sẽ giới thiệu cho mọi người về Props trong ReactJS. Đây là một khái niệm rất quan trọng trong React nên bạn chú ý nhé.
Như bài trước chúng ta đã học về Component trong React, để các bạn có thể truyền data qua lại giữa các component với nhau thì chính là nhờ có Props.
Chúng ta cùng tìm hiểu khái niệm này nhé.
Contents
Props là gì?
Props (Properties) là một object được truyền vào một component, mỗi component sẽ nhận vào một props và trả về một React Element.
Các component có thể giao tiếp với nhau nhờ vào props, có thể giao tiếp giữa component cha – con và ngược lại.
Bạn cũng có thể sử dụng một số lib để có thể quản lý và sử dụng props cho toàn bộ app như Redux, Flux, …
Khi một component con nhận props từ component cha thì nó chỉ có thể đọc (read only) mà không thể chỉnh sửa giá trị của props đó.
Để có thể truyền một props từ cha sang con thì bạn tạo mới một attributes giống như HTML
Bạn có thể xem ví dụ bên dưới
const App = () => <Welcome name="VoManhKien.com" />
Ở ví dụ trên mình đã tạo mới một attributes có tên name
và truyền giá trị là VoManhKien.com
bây giờ component Welcome
đã có thể show props có chứa biến name
ra rồi.
Sử dụng props trong component
Chúng ta cùng đi xét ví dụ bên dưới
class Welcome extends React.Component {
const { name, age, gender } = this.props;
render() {
return <h1>Hello {name}, năm nay {age}, và bạn là {gender}</h1>;
}
}
const element = <Welcome name="Kien" age={18} gender="male" />;
Như phần trước mình đã trình bày thì mình vừa tạo một element
const element = <Welcome name="Kien" age={18} gender="male" />;
truyền vào compoent Welcome
biến name, age, gender
có giá trị lần lượt bằng Kien, 18, male
Và ở component Welcome
mình đã lấy giá trị name, age, male
ra từ trong props
và hiển thị ra màn hình.
Bạn có thể truyền bất kỳ kiểu dữ liệu nào qua props như string, number, object, array, function, ...
Lưu ý khi sử dụng Props
Khi sử dụng props thì bạn cần lưu ý không nên thay đổi trực tiếp props bằng cách gán cho nó một giá trị mới props.name = "new value"
Bạn không thể sử dụng những cách thay đổi props như setProps
replaceProps
…
Nếu bạn muốn thay đổi props thì bắt buộc chỉ có thể thay đổi ở component cha nơi truyền props sang component con. Phần này chúng ta sẽ tìm hiểu trong những phần tiếp theo của khoá học này.
Ví dụ thực tế
Giả sử mình có component Author
, ở component App
(file src/App.js
) mình sẽ truyền một props name, avatar
sang cho component Author
. Component Author
sẽ hiển thị thông tin ra.
// src/App.js
import React from 'react';
import './App.css';
import Author from './Author';
function App() {
return (
<div className="App">
<Author name="Vo Manh Kien" avatar="https://vomanhkien.com/wp-content/uploads/2020/09/kien-vo-e1600923028433.jpg" />
</div>
);
}
export default App;
// src/Author.js
import React from "react";
function Author(props) {
const { name, avatar } = props;
return (
<div>
<img src={avatar} alt="Avatar" width="209" style={{ borderRadius: 100 }} />
<h2>{name}</h2>
</div>
);
}
export default Author;
Sau khi bạn chạy lệnh yarn start
thì sẽ ra kết quả như sau:

Bây giờ bạn có thể sử dụng component Author
ở bất kỳ đâu, chỉ cần truyền name, avatar
vào là được.
Bây giờ giả sử trường hợp mình không truyền tham số name
hoặc avatar
vào thì chẳng phải sẽ bị lỗi hay sao.
Vậy nên React đã cung cấp cho bạn cách để khai báo props mặc định
Bạn có thể khai báo như sau:
import React from "react";
function Author(props) {
const { name, avatar } = props;
return (
<div>
<img src={avatar} alt="Avatar" width="209" style={{ borderRadius: 100 }} />
<h2>{name}</h2>
</div>
);
}
// Thêm đoạn này vào
Author.defaultProps = {
name: "No Name",
avatar: "default avatar url"
}
// cho đến đây
export default Author;
Cú pháp để khai báo props default đó là tên component.defaultProps
trong trường hợp trên thì là Author.defaultProps
sẽ bằng với một object props tương ứng.
Như vậy nếu bạn không truyền vào thì nó cũng không bị lỗi mà sẽ có giá trị mặc định để hiển thị
Kết luận
Quan bài viết này mình đã giới thiệu đến bạn về Props trong ReactJS, đây là kiến thức rất quan trọng trong React, bạn chú ý luyện tập để hiểu nó nhé.
Nếu có thắc mắc nào thì có thể comment ở bên dưới, hoặc join group Facebook để cùng thảo luận nhé
Nếu có thắc mắc gì bạn có thể tham gia group https://vomanhkien.com/group-fb để cùng thảo luận nhé