Trong lúc code React việc sử dụng lại component của người khác là rất cần thiết. Có thể không ít bạn đã gặp vấn đề là prop này là gì và cần truyền cái gì cho nó thì phù hợp. Vì vậy việc định nghĩa kiểu dữ liệu cho các props đó là rất cần thiết để người khác khi sử dụng component đó có thể hiểu được mà không cần phải lọ mọ vào đọc code phải không nào.
1. PropTypes là gì?
PropTypes hiểu một cách đơn giản là giúp bạn có thể check được các props được truyền vào component có type là gì.
Khi người khác sử dụng component của bạn thì họ sẽ dễ dàng biết được props đó là gì và có bắt buộc phải truyền vào hay không.
Ngoài ra bạn còn có thể đặt giá trị mặc định cho props thông qua defaultProps.
2. Làm thế nào để sử dụng nó?
Muốn dùng nó thì cực kì đơn giản bạn chỉ cần:
1 2 | npm install --save prop-types |
hoặc
1 2 | yarn add prop-types |
Sau đó thì:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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">class</span> <span class="token class-name">Funny</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span> <span class="token function">render</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>h1<span class="token operator">></span>My name is <span class="token punctuation">{</span><span class="token keyword">this</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>h1<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> Funny<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><span class="token punctuation">;</span> |
3. PropTypes có những loại gì?
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <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> MyComponent<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">// Đây là một số type cơ bản chắc là ai cũng biết nhỉ</span> propArray<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>array<span class="token punctuation">,</span> propBool<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>bool<span class="token punctuation">,</span> propFunc<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span> <span class="token comment">// Đây là một function</span> propNumber<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">,</span> propObject<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>object<span class="token punctuation">,</span> propString<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span> propSymbol<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>symbol<span class="token punctuation">,</span> <span class="token comment">// Bất cứ thứ gì có thể dược rende: numbers, string, element, </span> <span class="token comment">// hoặc là một array chứa những thứ trên</span> propNode<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>node<span class="token punctuation">,</span> <span class="token comment">// Một React element.</span> propElement<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>element<span class="token punctuation">,</span> <span class="token comment">// Có thể limit props là một trong những kiểu nào đó </span> <span class="token comment">// bằng cách coi nó như enum</span> propEnum<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span><span class="token function">oneOf</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'News'</span><span class="token punctuation">,</span> <span class="token string">'Photos'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// một object mà có thể là một trong nhiều kiểu</span> propUnion<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span><span class="token function">oneOfType</span><span class="token punctuation">(</span><span class="token punctuation">[</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">,</span> PropTypes<span class="token punctuation">.</span>bool<span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// Là một mảng của các số chẳng hạn</span> propArrayOf<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span><span class="token function">arrayOf</span><span class="token punctuation">(</span>PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// Là một object mà trong đó có value là number</span> propObjectOf<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span><span class="token function">objectOf</span><span class="token punctuation">(</span>PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// một object theo một format nào đó</span> propShape<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span><span class="token function">shape</span><span class="token punctuation">(</span><span class="token punctuation">{</span> color<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span> fontSize<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>number <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// Hoặc là một mảng và trong mảng đó chứa các object</span> propArrayObj<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span><span class="token function">arrayOf</span><span class="token punctuation">(</span> PropTypes<span class="token punctuation">.</span><span class="token function">shape</span><span class="token punctuation">(</span><span class="token punctuation">{</span> color<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span> fontSize<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>number <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// bất cứ kiểu nào</span> requiredAny<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>any<span class="token punctuation">,</span> <span class="token punctuation">}</span> |
Để bắt buộc phải truyền vào một prop nào đó thì chỉ cần thêm isRequired vào sau type là được:
1 2 | propNumber: PropTypes.number.isRequired |
4. Làm thế nào để truyền giá trị mặc định cho props?
Nó rất đơn giản chỉ cần bạn khai báo thêm defaultProps là được thô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> PropTypes <span class="token keyword">from</span> <span class="token string">'prop-types'</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">Funny</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span> <span class="token function">render</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>h1<span class="token operator">></span>My name is <span class="token punctuation">{</span><span class="token keyword">this</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>h1<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> Funny<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><span class="token punctuation">;</span> Funny<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">'Sun*'</span> <span class="token punctuation">}</span> |
5. Kết luận
Trên đây là một số kiến thức về prop-types mà mình đã tìm hiểu được. Hi vọng nó giúp ích được cho bạn
Link thảm khảo: https://reactjs.org/docs/typechecking-with-proptypes.html