Props là gì dụng props khi nào

Question

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

Nội dung chính Show

Props là gì?
Sử dụng props trong component
Lưu ý khi sử dụng Props
Ví dụ thực tế
Kết luận

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

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" />;

1 có giá trị lần lượt bằng

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" />;

2

Và ở component Welcome mình đã lấy giá trị

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" />;

4 ra từ trong

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" />;

5 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ư

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" />;

6

Lưu ý khi sử dụng Props

Khi sử dụng props thì bạn cần lưu ý bằng cách gán cho nó một giá trị mớ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" />;

7

Bạn không thể sử dụng những cách thay đổi props như

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" />;

8

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" />;

9 …

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

const element = <Welcome name="Kien" age={18} gender="male" />;

0, ở component

const element = <Welcome name="Kien" age={18} gender="male" />;

1 (file

const element = <Welcome name="Kien" age={18} gender="male" />;

2) mình sẽ truyền một props

const element = <Welcome name="Kien" age={18} gender="male" />;

3 sang cho component

const element = <Welcome name="Kien" age={18} gender="male" />;

0. Component

const element = <Welcome name="Kien" age={18} gender="male" />;

0 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

const element = <Welcome name="Kien" age={18} gender="male" />;

6 thì sẽ ra kết quả như sau:

Props trong react demo

Bây giờ bạn có thể sử dụng component

const element = <Welcome name="Kien" age={18} gender="male" />;

0 ở bất kỳ đâu, chỉ cần truyền

const element = <Welcome name="Kien" age={18} gender="male" />;

3 vào là được.

Bây giờ giả sử trường hợp mình không truyền tham số name hoặc

// 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;

0 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à

// 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;

1 trong trường hợp trên thì là

// 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;

2 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ị