Props và state trong reactjs

Thứ Hai, 06/03/2023

Tram Ho

1. Props

Props là dữ liệu truyền từ component cha xuống component con và chỉ có thể chỉnh sửa ở component cha. Trong component con, props là chỉ đọc (read-only) và không thể thay đổi giá trị của nó.

<span class="token keyword">function</span> <span class="token function">Card</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"card"</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>img src<span class="token operator">=</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>image<span class="token punctuation">}</span> alt<span class="token operator">=</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>title<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>h2<span class="token operator">&gt;</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>description<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>Card
        title<span class="token operator">=</span><span class="token string">"Card 1"</span>
        description<span class="token operator">=</span><span class="token string">"This is the first card."</span>
        image<span class="token operator">=</span><span class="token string">"https://example.com/card1.jpg"</span>
      <span class="token operator">/</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>Card
        title<span class="token operator">=</span><span class="token string">"Card 2"</span>
        description<span class="token operator">=</span><span class="token string">"This is the second card."</span>
        image<span class="token operator">=</span><span class="token string">"https://example.com/card2.jpg"</span>
      <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator">&lt;</span>App <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

function Card(props) {

return (

<h2>{props.title}</h2>

<p>{props.description}</p>

</div>

);

}

function App() {

return (

<div>

<Card

title="Card 1"

description="This is the first card."

image="https://example.com/card1.jpg"

/>

<Card

title="Card 2"

description="This is the second card."

image="https://example.com/card2.jpg"

/>

</div>

);

}

ReactDOM.render(<App />, document.getElementById('root'));

Props là viết tắt của “properties” (tính chất, thuộc tính) và là một object chứa các thông tin dữ liệu. Dữ liệu này có thể là number, string, array, object, list…

2. Khai báo props và kiểm tra dữ liệu của props

Để khai báo props, ta thêm một đối tượng props vào tham số của hàm render của component đó. Ví dụ:

<span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token operator">&lt;</span>h1<span class="token operator">&gt;</span>Hello<span class="token punctuation">,</span> <span class="token punctuation">{</span>props<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator">!</span><span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

function MyComponent(props) {

return <h1>Hello, {props.name}!</h1>;

}

Để kiểm tra dữ liệu của props ta dùng PropTypes. Ví dụ như ta có yêu cầu name bắt buộc phải có trong props thì ta làm như sau => nếu name không có thì ta sẽ có cảnh báo trong console.

<span class="token keyword">import</span> PropTypes <span class="token keyword">from</span> <span class="token string">'prop-types'</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token operator">&lt;</span>h1<span class="token operator">&gt;</span>Hello<span class="token punctuation">,</span> <span class="token punctuation">{</span>props<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator">!</span><span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

MyComponent<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">.</span>isRequired
<span class="token punctuation">}</span><span class="token punctuation">;</span>

import PropTypes from 'prop-types';

}

MyComponent.propTypes = {

name: PropTypes.string.isRequired

};

Sử dụng defaultProps để định nghĩa giá trị mặc định cho props. Ví dụ:

<span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token operator">&lt;</span>h1<span class="token operator">&gt;</span>Hello<span class="token punctuation">,</span> <span class="token punctuation">{</span>props<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator">!</span><span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

MyComponent<span class="token punctuation">.</span>defaultProps <span class="token operator">=</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'Reactjs'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

}

MyComponent.defaultProps = {

name: 'Reactjs'

};

3. State

State là một đối tượng dùng cho những dữ liệu thay đổi. State được tạo ra và quản lý bởi component hiện tại.
Khi state thay đổi, React sẽ tự động cập nhật component và render lại với state mới.

<span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>color<span class="token punctuation">,</span> setColor<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">'red'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> newColor <span class="token operator">=</span> color <span class="token operator">===</span> <span class="token string">'red'</span> <span class="token operator">?</span> <span class="token string">'blue'</span> <span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">;</span>
    <span class="token function">setColor</span><span class="token punctuation">(</span>newColor<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>div style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> color <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>h1<span class="token operator">&gt;</span>Hello world<span class="token operator">!</span><span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span><span class="token operator">&gt;</span>Change color<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

import React, { useState } from 'react';

function MyComponent() {

const [color, setColor] = useState('red');

const handleClick = () => {

const newColor = color === 'red' ? 'blue' : 'red';

setColor(newColor);

};

return (

<h1>Hello world!</h1>

<button onClick={handleClick}>Change color</button>

</div>

);

}

Ta sử dụng useState để khởi tạo giá trị ban đầu cho state color là red. Khi click vào button Change Color thì ta sẽ xử lý sự kiện click và gọi tới SetColor để set lại state mới và component sẽ render lại với state color mới.

4. So sánh Props và state.

Nhìn vào hình trên ta thấy props được sử dụng để truyền dữ liệu từ component cha xuống component con và props không thể thay đổi giá trị ở component con.
State là các giá trị được lưu trữ bên trong một component và có thể được thay đổi bởi component đó. State có thể được sử dụng để lưu trữ các giá trị tạm thời, trạng thái hiện tại của component.
Ngoài ra để truyền dữ liệu giữa các trang ta có thể dùng redux. Phần này mình sẽ nói ở bài viết khác.

5. Tổng kết

Qua bài viết này hy vọng mọi người hiểu được cơ bản cách sử dụng props và state trong reactjs.
Cảm ơn mọi người đã xem bài viết. Chúc mọi người một cuối tuần vui vẻ. Nếu có thắc mắc về các phần trong bài này mọi người có thể inbox qua facebook:https://www.facebook.com/FriendsCode-108096425243996 Mình sẽ giải đáp thắc mắc trong tầm hiểu biết. Cảm ơn mọi người!
Hoặc liên hệ mình qua facebook cá nhân: https://www.facebook.com/Flamesofwars/

6. Tham khảo

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Props và state trong reactjs

1. Props

2. Khai báo props và kiểm tra dữ liệu của props

3. State

4. So sánh Props và state.

5. Tổng kết

6. Tham khảo

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript