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é.

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:

Props trong react demo
Props trong react demo

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é

Xem code trên Github