Xin chào các bạn!
Hôm nay mình lại trở lại với series Reactjs nâng cao. Ở bài trước chúng ta đã tìm hiểu về cách viết 1 hooks trong React hoàn chỉnh và có thể tái sử dụng cho toàn bộ dự án của bạn từ nay trở về sau.
Trong bài này mình sẽ nói về việc tạo ra một layout tổng quát cho component, nhằm mục đích để tái sử dụng component này về sau.
Hãy nhớ rằng: Tái sử dụng Component là tiêu chí sống còn khi scale ứng dụng của bạn!. Vì rằng khi ứng dụng của bạn lớn lên và có đến hàng nghìn component, nếu các component càng không liên quan đến nhau thì size của ứng dụng của bạn càng lớn, càng rắc rối, đến mức mỗi khi nhìn lại nó bạn chỉ muốn ném máy tính đi thôi! Tin tôi đi!
Live demo
Trước khi đọc tiếp, hãy xem live demo Tại đây đã nhé!
Mở đầu
Giả sử chúng ta có các components với layout tương tự nhau, như hình dưới đây:
Component sẽ được layout thành các vùng như vậy, nhưng việc render cái gì vào đó là có thể tùy biến linh hoạt. Layout này có thể phù hợp với Modal, cũng có thể phù hợp với Alert, Toast, ….. và rất nhiều thứ khác. Vì vậy nó sẽ được tái sử dụng rất nhiều trong dự án. Giảm thiểu việc phải viết đi viết lại những đoạn code giống nhau một cách thừa thãi.
Bắt đầu
1. Tạo ra một Context Provider dạng Slots
Cho tao 1 slot nhé! Bạn có thấy câu nói này rất phổ biến không? Slot là một “đặt hàng” để giữ chỗ trước, sau đó có thể lấy hoặc không lấy nó.
Slots Provider mà chúng ta sắp tạo cũng như vậy, nó sẽ tạo ra một loạt các slots, sau đó thằng nào lấy slot nào để hiển thị thì sẽ vào đúng vùng mà ta đã layout. Ở đây ta sẽ tạo ra các slots sau:
- header
- closeIcon
- divider
- content
- footer
- buttonGroup
… Tương ứng với các phân vùng của layout đã được thiết kế trong ảnh trên.
Như vậy khi sử dụng nó, ta sẽ viết đại loại như sau:
1 2 3 4 5 6 7 8 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlotsComponent</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Slot</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Đây là header</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Slot</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Slot</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>closeIcon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Đây là close icon</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Slot</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Slot</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>divider<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Đây là divider</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Slot</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Slot</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Đây là content</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Slot</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Slot</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>buttonGroup<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Đây là buttons group</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Slot</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlotsComponent</span></span><span class="token punctuation">></span></span> |
Điểm hay ho của việc sử dụng Slots là bạn không cần quan tâm thứ tự của các Slot, chỉ cần điền đúng tên slot là được. Ví dụ nếu bạn thay đổi thứ tự viết các slots như sau thì component vẫn render ra đúng layout như thế.
1 2 3 4 5 6 7 8 9 10 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlotsComponent</span></span><span class="token punctuation">></span></span><span class="token plain-text"> // Đưa cái nào lên trước cũng không thành vấn đề, // slot của mày là closeIcon thì mày phải nằm đúng vùng closeIcon do tao đặt ra cho mày </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Slot</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>closeIcon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Đây là close icon</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Slot</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Slot</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Đây là header</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Slot</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Slot</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>divider<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Đây là divider</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Slot</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Slot</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Đây là content</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Slot</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Slot</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>buttonGroup<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Đây là buttons group</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Slot</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlotsComponent</span></span><span class="token punctuation">></span></span> |
OK, tiếp nào! đây là code cho SlotsProvider, đây chỉ là thuần React Context thôi nên cũng không có gì phải bàn nhiều:
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 | <span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useContext<span class="token punctuation">,</span> useMemo <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">interface</span> <span class="token class-name">SlotProps</span> <span class="token punctuation">{</span> slot<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> SlotContext <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createContext</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">function</span> useSlotProps<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span><span class="token punctuation">(</span>props<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span> defaultSlot<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">T</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> slot <span class="token operator">=</span> <span class="token punctuation">(</span>props <span class="token keyword">as</span> SlotProps<span class="token punctuation">)</span><span class="token punctuation">.</span>slot <span class="token operator">||</span> defaultSlot<span class="token punctuation">;</span> <span class="token keyword">let</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>slot<span class="token punctuation">]</span><span class="token operator">:</span> slotProps <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useContext</span><span class="token punctuation">(</span>SlotContext<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> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>slotProps<span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">SlotProvider</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">let</span> parentSlots <span class="token operator">=</span> <span class="token function">useContext</span><span class="token punctuation">(</span>SlotContext<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">let</span> <span class="token punctuation">{</span> slots <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> children <span class="token punctuation">}</span> <span class="token operator">=</span> props<span class="token punctuation">;</span> <span class="token comment">// Merge props for each slot from parent context and props</span> <span class="token keyword">let</span> value <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> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>parentSlots<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>slots<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span> <span class="token punctuation">(</span><span class="token parameter">o<span class="token punctuation">,</span> p</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span>o<span class="token punctuation">,</span> <span class="token punctuation">[</span>p<span class="token punctuation">]</span><span class="token operator">:</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>parentSlots<span class="token punctuation">[</span>p<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> slots<span class="token punctuation">[</span>p<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 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 punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>parentSlots<span class="token punctuation">,</span> slots<span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token operator"><</span>SlotContext<span class="token punctuation">.</span>Provider value<span class="token operator">=</span><span class="token punctuation">{</span>value<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>children<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>SlotContext<span class="token punctuation">.</span>Provider<span class="token operator">></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
2. Tạo ra một SlotWrapper
Đây chỉ là một Wrapper, nhằm mục đích wrapper bất cứ thứ gì bạn muốn render vào đúng Slot bằng cách chỉ định tên slot cho nó 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> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> useSlotProps <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./SlotsProvider"</span><span class="token punctuation">;</span> <span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span> slot<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> children<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactElement<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">SlotWrapper</span> <span class="token operator">=</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 operator">=></span> <span class="token punctuation">{</span> props <span class="token operator">=</span> <span class="token function">useSlotProps</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> <span class="token string">"text"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> children<span class="token punctuation">,</span> <span class="token operator">...</span>otherProps <span class="token punctuation">}</span> <span class="token operator">=</span> props<span class="token punctuation">;</span> <span class="token keyword">return</span> React<span class="token punctuation">.</span><span class="token function">cloneElement</span><span class="token punctuation">(</span>children<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token operator">...</span>otherProps <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> |
3. Viết một component test, thể hiện cái layout đã thiết kế
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 | <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> SlotProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./SlotsProvider"</span><span class="token punctuation">;</span> <span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span> children<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode <span class="token operator">|</span> React<span class="token punctuation">.</span>ReactNode<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">TestComponent</span> <span class="token operator">=</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 operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>grid<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlotProvider</span></span> <span class="token attr-name">slots</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> header<span class="token operator">:</span> <span class="token punctuation">{</span> className<span class="token operator">:</span> <span class="token string">"header"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> closeIcon<span class="token operator">:</span> <span class="token punctuation">{</span> className<span class="token operator">:</span> <span class="token string">"closeIcon"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> divider<span class="token operator">:</span> <span class="token punctuation">{</span> className<span class="token operator">:</span> <span class="token string">"divider"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> content<span class="token operator">:</span> <span class="token punctuation">{</span> className<span class="token operator">:</span> <span class="token string">"content"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> footer<span class="token operator">:</span> <span class="token punctuation">{</span> className<span class="token operator">:</span> <span class="token string">"footer"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> buttonGroup<span class="token operator">:</span> <span class="token punctuation">{</span> className<span class="token operator">:</span> <span class="token string">"buttonGroup"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">></span></span> <span class="token punctuation">{</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlotProvider</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Chúng ta chỉ việc wrap toàn bộ children của component trong <SlotProvider.... Đồng thời tạo ra các slots cho nó, trong mỗi slot, ở đây mình đã chèn một cái className vào cho nó.
4. CSS tí thôi!
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 | <span class="token selector">.App</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #f0f1f2<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.grid</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 12px auto 1fr auto <span class="token function">minmax</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> auto<span class="token punctuation">)</span> 12px<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> auto auto 16px 1fr auto auto 12px<span class="token punctuation">;</span> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">". . . . . ."</span> <span class="token string">". header header header closeIcon ."</span> <span class="token string">"divider divider divider divider divider divider"</span> <span class="token string">"content content content content content content"</span> <span class="token string">". footer footer buttonGroup buttonGroup ."</span> <span class="token string">". . . . . ."</span><span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.header</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> header<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.closeIcon</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> closeIcon<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.divider</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> divider<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.content</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> content<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.footer</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> footer<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.buttonGroup</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> buttonGroup<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Thế là xong rồi đấy! Giờ thì test nào!
5. Sử dụng
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 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> SlotWrapper <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./SlotWrapper"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> TestComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./TestComponent"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">"./styles.css"</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</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 tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>App<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Slots provider test</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> display<span class="token operator">:</span> <span class="token string">"flex"</span><span class="token punctuation">,</span> alignItems<span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span> justifyContent<span class="token operator">:</span> <span class="token string">"center"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TestComponent</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlotWrapper</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span><span class="token plain-text">This is header</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlotWrapper</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlotWrapper</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>closeIcon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Icon</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlotWrapper</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlotWrapper</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">This is content area, you can render any thing here</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlotWrapper</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlotWrapper</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>divider<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlotWrapper</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlotWrapper</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>buttonGroup<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">Button 1</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlotWrapper</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TestComponent</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
6. Kết thúc
Hi vọng bài viết này bổ ích cho mọi người, nếu có chỗ nào gây khó hiểu bạn hãy comment phía dưới nhé! Mình rất sẵn lòng giải đáp! Cảm ơn bạn đã theo dõi bài viết của mình!