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ó.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <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"><</span>div className<span class="token operator">=</span><span class="token string">"card"</span><span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token operator"><</span>h2<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">/</span>h2<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>description<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></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"><</span>div<span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token operator"><</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">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></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"><</span>App <span class="token operator">/</span><span class="token operator">></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> |
- 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ụ:
1 2 3 4 | <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"><</span>h1<span class="token operator">></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"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
- Để 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.
1 2 3 4 5 6 7 8 9 10 11 | <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"><</span>h1<span class="token operator">></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"><</span><span class="token operator">/</span>h1<span class="token operator">></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> |
- Sử dụng defaultProps để định nghĩa giá trị mặc định cho props. Ví dụ:
1 2 3 4 5 6 7 8 | <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"><</span>h1<span class="token operator">></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"><</span><span class="token operator">/</span>h1<span class="token operator">></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> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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">=></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"><</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">></span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello world<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span><span class="token operator">></span>Change color<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
- 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