Xin chào các bạn!
Trong series này, mình sẽ bắt đầu chia sẻ những kiến thức có thể tạm gọi là nâng cao về Reactjs, vì nó không dành cho những người mới học Reactjs. Mình sẽ cố gắng giải thích nhiều nhất có thể ý nghĩa của từng đoạn code được viết ra. Mình hi vọng những chia sẻ của mình sẽ hữu ích với các bạn đang sử dụng Reactjs. Nếu bạn phát hiện trong bài viết của mình có lỗi, hãy comment phía dưới giúp mình nhé! Xin cảm ơn!
Bắt đầu thôi nào!
Đặt vấn đề: Trong các component của React, chúng ta thường sử dụng rất thường xuyên việc xử lý các sự kiện Hover chuột lên component. Theo cách thông thường chúng ta sẽ viết đại khái như này:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">function</span> <span class="token function">Component</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token operator">:</span> Props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>isHovered<span class="token punctuation">,</span> setIsHovered<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span>useState<span class="token operator"><</span>boolean<span class="token operator">></span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">handleMouseOver</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 function">setIsHovered</span><span class="token punctuation">(</span><span class="token boolean">true</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 function-variable function">handleMouseLeave</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 function">setIsHovered</span><span class="token punctuation">(</span><span class="token boolean">false</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 onMouseOver<span class="token operator">=</span><span class="token punctuation">{</span>handleMouseOver<span class="token punctuation">}</span> onMouseLeave<span class="token operator">=</span><span class="token punctuation">{</span>handleMouseLeave<span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token operator">...</span>otherProps<span class="token punctuation">}</span> <span class="token operator">></span> Component <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> |
Sẽ không có vấn đề gì cả khi ứng dụng của bạn chỉ có ít component phải sử dụng các sự kiện Hover chuột. Nhưng nếu Ứng dụng của bạn có quá nhiều chỗ phải dùng đến nó thì sao? Chẳng lẽ cứ trong mỗi component lại phải viết lại đống này sao?
Câu trả lời rõ ràng là không, bằng cách này hay cách khác, nhưng chắc chắn bạn sẽ phải đóng gói chúng lại để tái sử dụng. Có thể nghĩ đến Higer Order Component cũng là một giải pháp.
Ở đây, mình sẽ cung cấp một giải pháp xử lý nó để tái sử dụng một cách đơn giản nhất. đó là: Tạo ra một hooks để xử lý các sự kiện Hover chuột.
Kết quả sẽ được một hàm useHover()
và chúng ta có thể sử dụng nó dễ dàng như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">import</span> <span class="token punctuation">{</span>useHover<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mylibrary/useHover'</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>hoverProps<span class="token punctuation">,</span> isHovered<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useHover</span><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 keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div <span class="token punctuation">{</span><span class="token operator">...</span>hoverProps<span class="token punctuation">}</span> <span class="token operator">></span> <span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">isHovered: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>isHovered<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</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> |
Live demo:
Thực sự đơn giản phải không? giờ đây mỗi khi cần trigger Hover trên component nào đó, chúng ta chỉ cần đơn giản vài ba dòng là xong.
Và bây giờ sẽ là code!
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | <span class="token keyword">import</span> <span class="token punctuation">{</span> RefObject<span class="token punctuation">,</span> HTMLAttributes<span class="token punctuation">,</span> useMemo<span class="token punctuation">,</span> useRef<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">export</span> <span class="token keyword">interface</span> <span class="token class-name">HoverEvent</span> <span class="token punctuation">{</span> <span class="token comment">/** The type of hover event being fired. */</span> type<span class="token operator">:</span> <span class="token string">"hoverstart"</span> <span class="token operator">|</span> <span class="token string">"hoverend"</span><span class="token punctuation">;</span> <span class="token comment">/** The pointer type that triggered the hover event. */</span> pointerType<span class="token operator">:</span> <span class="token string">"mouse"</span> <span class="token operator">|</span> <span class="token string">"pen"</span><span class="token punctuation">;</span> <span class="token comment">/** The target element of the hover event. */</span> target<span class="token operator">:</span> HTMLElement<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">HoverEvents</span> <span class="token punctuation">{</span> <span class="token comment">/** Handler that is called when a hover interaction starts. */</span> onHoverStart<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token operator">:</span> HoverEvent</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span> <span class="token comment">/** Handler that is called when a hover interaction ends. */</span> onHoverEnd<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token operator">:</span> HoverEvent</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span> <span class="token comment">/** Handler that is called when the hover state changes. */</span> onHoverChange<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">isHovering<span class="token operator">:</span> boolean</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">HoverProps</span> <span class="token keyword">extends</span> <span class="token class-name">HoverEvents</span> <span class="token punctuation">{</span> <span class="token comment">/** Whether the hover events should be disabled. */</span> isDisabled<span class="token operator">?</span><span class="token operator">:</span> boolean<span class="token punctuation">;</span> isHovered<span class="token operator">?</span><span class="token operator">:</span> boolean<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">HoverHookProps</span> <span class="token keyword">extends</span> <span class="token class-name">HoverProps</span> <span class="token punctuation">{</span> ref<span class="token operator">?</span><span class="token operator">:</span> RefObject<span class="token operator"><</span>HTMLElement<span class="token operator">></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">interface</span> <span class="token class-name">HoverResult</span> <span class="token punctuation">{</span> <span class="token comment">/** Props to spread on the target element. */</span> hoverProps<span class="token operator">:</span> HTMLAttributes<span class="token operator"><</span>HTMLElement<span class="token operator">></span><span class="token punctuation">;</span> isHovered<span class="token operator">:</span> boolean<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/** * Handles pointer hover interactions for an element. Normalizes behavior * across browsers and platforms, and ignores emulated mouse events on touch devices. */</span> <span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">useHover</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token operator">:</span> HoverProps</span><span class="token punctuation">)</span><span class="token operator">:</span> HoverResult <span class="token punctuation">{</span> <span class="token keyword">let</span> <span class="token punctuation">{</span> onHoverStart<span class="token punctuation">,</span> onHoverChange<span class="token punctuation">,</span> onHoverEnd<span class="token punctuation">,</span> isDisabled<span class="token punctuation">,</span> isHovered<span class="token operator">:</span> isHoveredProp <span class="token punctuation">}</span> <span class="token operator">=</span> props<span class="token punctuation">;</span> <span class="token keyword">let</span> <span class="token punctuation">[</span>isHovered<span class="token punctuation">,</span> setHovered<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> state <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token punctuation">{</span> isHovered<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> ignoreEmulatedMouseEvents<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span>current<span class="token punctuation">;</span> <span class="token keyword">let</span> hoverProps <span class="token operator">=</span> <span class="token function">useMemo</span><span class="token punctuation">(</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">let</span> <span class="token function-variable function">triggerHoverStart</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> pointerType</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// Giải thích thêm: Bỏ qua nếu component bị disabled, hoặc touch trên di động, hoặc đã hover rồi.</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>isDisabled <span class="token operator">||</span> pointerType <span class="token operator">===</span> <span class="token string">"touch"</span> <span class="token operator">||</span> state<span class="token punctuation">.</span>isHovered<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> state<span class="token punctuation">.</span>isHovered <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token keyword">let</span> target <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>onHoverStart<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">onHoverStart</span><span class="token punctuation">(</span><span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">"hoverstart"</span><span class="token punctuation">,</span> target<span class="token punctuation">,</span> pointerType <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>onHoverChange<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">onHoverChange</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">setHovered</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">let</span> <span class="token function-variable function">triggerHoverEnd</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> pointerType</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>isDisabled <span class="token operator">||</span> pointerType <span class="token operator">===</span> <span class="token string">"touch"</span> <span class="token operator">||</span> <span class="token operator">!</span>state<span class="token punctuation">.</span>isHovered<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> state<span class="token punctuation">.</span>isHovered <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token keyword">let</span> target <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>onHoverEnd<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">onHoverEnd</span><span class="token punctuation">(</span><span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">"hoverend"</span><span class="token punctuation">,</span> target<span class="token punctuation">,</span> pointerType <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>onHoverChange<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">onHoverChange</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">setHovered</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">let</span> hoverProps<span class="token operator">:</span> HTMLAttributes<span class="token operator"><</span>HTMLElement<span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> PointerEvent <span class="token operator">!==</span> <span class="token string">"undefined"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> hoverProps<span class="token punctuation">.</span><span class="token function-variable function">onPointerEnter</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">triggerHoverStart</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> e<span class="token punctuation">.</span>pointerType<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> hoverProps<span class="token punctuation">.</span><span class="token function-variable function">onPointerLeave</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">triggerHoverEnd</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> e<span class="token punctuation">.</span>pointerType<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 keyword">else</span> <span class="token punctuation">{</span> hoverProps<span class="token punctuation">.</span><span class="token function-variable function">onTouchStart</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> state<span class="token punctuation">.</span>ignoreEmulatedMouseEvents <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> hoverProps<span class="token punctuation">.</span><span class="token function-variable function">onMouseEnter</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>state<span class="token punctuation">.</span>ignoreEmulatedMouseEvents<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">triggerHoverStart</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> <span class="token string">"mouse"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> state<span class="token punctuation">.</span>ignoreEmulatedMouseEvents <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> hoverProps<span class="token punctuation">.</span><span class="token function-variable function">onMouseLeave</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">triggerHoverEnd</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> <span class="token string">"mouse"</span><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 keyword">return</span> hoverProps<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>onHoverStart<span class="token punctuation">,</span> onHoverChange<span class="token punctuation">,</span> onHoverEnd<span class="token punctuation">,</span> isDisabled<span class="token punctuation">,</span> state<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> hoverProps<span class="token punctuation">,</span> isHovered<span class="token operator">:</span> isHoveredProp <span class="token operator">||</span> isHovered <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Giải thích code
Quay lại đoạn code sử dụng ở trên:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">import</span> <span class="token punctuation">{</span>useHover<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mylibrary/useHover'</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>hoverProps<span class="token punctuation">,</span> isHovered<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useHover</span><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 keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div <span class="token punctuation">{</span><span class="token operator">...</span>hoverProps<span class="token punctuation">}</span> <span class="token operator">></span> <span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">isHovered: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>isHovered<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</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 thấy rằng hàm useHover()
trả về 1 object có chứa 2 tham số: hoverProps
là hàm xử lý các sự kiện Hover để chèn vào component của bạn; isHovered
là giá trị boolean
, true
khi hover chuột vào phần tử.
Bạn cũng có thể xử lý thêm các sự kiện hover bằng cách truyền vào props của hàm useHover()
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token keyword">import</span> <span class="token punctuation">{</span>useHover<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mylibrary/useHover'</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>hoverProps<span class="token punctuation">,</span> isHovered<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useHover</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token function-variable function">onHoverStart</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>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onHoverStart'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onHoverEnd</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>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onHoverEnd'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token operator">...</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 punctuation">{</span><span class="token operator">...</span>hoverProps<span class="token punctuation">}</span> <span class="token operator">></span> <span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">isHovered: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>isHovered<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</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> |
Chi tiết trong hàm useHover() có lẽ cũng không cần giải thích gì thêm vì bản thân nó đã rất clean rồi phải không nào? Nếu bạn thấy chỗ nào khó hiểu, đừng ngần ngại comment phía dưới nhé! Mình sẽ giải đáp sớm nhất!
Kết thúc bài đầu tiên tại đây. Hi vọng bài viết này bổ ích đối với bạn. Cảm ơn bạn đã dành thời gian đọc bài của tôi!