ส่วนประกอบในปฏิกิริยา

ส่วนประกอบแบบผสมช่วยให้นักพัฒนาสร้าง API ที่แสดงออกและยืดหยุ่นมากขึ้นเพื่อแชร์สถานะและตรรกะภายในส่วนประกอบ บทช่วยสอนนี้จะอธิบายวิธีที่สามารถทำได้โดยใช้ Context API และ React เพื่อสร้างส่วนประกอบโดยใช้รูปแบบขั้นสูงนี้

หมายเหตุ : เพื่อให้สามารถปฏิบัติตามได้ คุณจะต้องมีความเข้าใจพื้นฐานเกี่ยวกับ React และวิธีการทำงานของ Context API

สารประกอบเชิงซ้อนคืออะไร?

ส่วนประกอบแบบผสมสามารถกล่าวได้ว่าเป็นรูปแบบที่ล้อมรอบสถานะและพฤติกรรมของกลุ่มส่วนประกอบ แต่ยังคงให้การควบคุมการแสดงผลของชิ้นส่วนที่แปรผันได้กลับไปยังผู้ใช้ภายนอก

จากคำจำกัดความข้างต้น ให้สังเกตคำหลัก: state and behavior สิ่งนี้ช่วยให้เราเข้าใจว่าองค์ประกอบแบบทบต้นจัดการกับสถานะ (เช่น ว่าสถานะทำงานอย่างไรกับส่วนประกอบที่ล้อมรอบโดยผู้ใช้ภายนอกซึ่งเป็นพาเรนต์ของส่วนประกอบ)

วัตถุประสงค์ขององค์ประกอบแบบผสมคือการจัดเตรียม API ที่แสดงออกและยืดหยุ่นมากขึ้นสำหรับการสื่อสารระหว่างองค์ประกอบหลักและองค์ประกอบย่อย

คิดว่ามันเหมือนกับแท็ก <select> และ <option> ใน HTML:

 <select> <option value="volvo">Volvo</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

แท็ก select ทำงานร่วมกับแท็ก option ที่ใช้สำหรับเมนูแบบเลื่อนลงเพื่อเลือกรายการใน HTML ที่นี่ <select> จะจัดการสถานะของ UI จากนั้นองค์ประกอบ <option> จะได้รับการกำหนดค่าว่า <select> ควรทำงานอย่างไร ส่วนประกอบแบบผสมใน React ถูกใช้เพื่อสร้างส่วนประกอบ UI ที่ประกาศซึ่งช่วยหลีกเลี่ยงการเจาะเสา

การเจาะเสากำลังส่งอุปกรณ์ประกอบฉากลงส่วนประกอบย่อยหลายชิ้น นี่คือสิ่งที่เรียกว่า "กลิ่นโค้ด" ส่วนที่แย่ที่สุดของการเจาะเสาคือเมื่อส่วนประกอบหลักแสดงผลซ้ำ ส่วนประกอบย่อยจะแสดงผลซ้ำและทำให้เกิดเอฟเฟกต์โดมิโนกับส่วนประกอบ ทางออกที่ดีคือการใช้ React Context API ซึ่งเราจะพิจารณาในภายหลังด้วย

การใช้ส่วนประกอบแบบผสมในปฏิกิริยา

ส่วนนี้อธิบายแพ็คเกจที่เราสามารถนำมาใช้ในแอปพลิเคชันของเรา ซึ่งนำรูปแบบส่วนประกอบแบบผสมของส่วนประกอบอาคารใน React มาใช้ ตัวอย่างนี้เป็นส่วนประกอบ Menu จาก @reach UI

 import { Menu, MenuList, MenuButton, MenuItem, MenuItems, MenuPopover, MenuLink, } from "@reach/menu-button"; import "@reach/menu-button/styles.css";

คุณสามารถใช้องค์ประกอบ Menu ได้ด้วยวิธีต่อไปนี้

 function Example() { return ( <Menu> <MenuButton>Actions</MenuButton> <MenuList> <MenuItem>Download</MenuItem> <MenuLink to="view">View</MenuLink> </MenuList> </Menu> ); }

โค้ดตัวอย่างด้านบนเป็นหนึ่งในการใช้งานคอมโพเนนต์แบบผสม ซึ่งคุณจะเห็นว่า Menu , MenuButton , MenuList , MenuItem และ MenuLink นำเข้าทั้งหมดจาก @reach/menu-button ตรงข้ามกับการส่งออกองค์ประกอบเดียว ReachUI จะส่งออกองค์ประกอบหลักซึ่งเป็น Menu ที่มาพร้อมกับองค์ประกอบย่อย ได้แก่ MenuButton , MenuList , MenuItem และ MenuLink

คุณควรใช้ส่วนประกอบแบบผสมเมื่อใด

ในฐานะนักพัฒนา React คุณควรใช้ส่วนประกอบแบบผสมเมื่อคุณต้องการ:

• แก้ไขปัญหาที่เกี่ยวข้องกับการสร้างส่วนประกอบที่นำกลับมาใช้ใหม่ได้
• การพัฒนาส่วนประกอบที่มีความเหนียวสูงโดยมีข้อต่อน้อยที่สุด
• วิธีที่ดีกว่าในการแบ่งปันตรรกะระหว่างส่วนประกอบต่างๆ

ข้อดีและข้อเสียของส่วนประกอบที่เป็นส่วนประกอบ

ส่วนประกอบแบบผสมคือรูปแบบ React ที่ยอดเยี่ยมเพื่อเพิ่มไปยังชุดเครื่องมือสำหรับนักพัฒนา React ของคุณ ในส่วนนี้ ฉันจะพูดถึงข้อดีและข้อเสียของการใช้ส่วนประกอบแบบผสม และสิ่งที่ฉันได้เรียนรู้จากส่วนประกอบอาคารโดยใช้รูปแบบการพัฒนานี้

ข้อดี

• การแยกจากกันของความกังวล
  การมีตรรกะสถานะ UI ทั้งหมดในองค์ประกอบหลักและการสื่อสารภายในกับส่วนประกอบย่อยทั้งหมดทำให้มีการแบ่งความรับผิดชอบอย่างชัดเจน

• ลดความซับซ้อน
  เมื่อเทียบกับการเจาะเสาเพื่อส่งต่อคุณสมบัติไปยังส่วนประกอบเฉพาะ อุปกรณ์ประกอบฉากย่อยจะไปที่ส่วนประกอบย่อยตามลำดับโดยใช้รูปแบบส่วนประกอบแบบผสม

ข้อเสีย

ข้อเสียที่สำคัญประการหนึ่งของการสร้างส่วนประกอบใน React กับรูปแบบส่วนประกอบแบบผสมคือ เฉพาะ direct children ขององค์ประกอบหลักเท่านั้นที่จะสามารถเข้าถึงอุปกรณ์ประกอบฉากได้ ซึ่งหมายความว่าเราไม่สามารถห่อส่วนประกอบเหล่านี้ในส่วนประกอบอื่นได้

 export default function FlyoutMenu() { return ( <FlyOut> {/* This breaks */} <div> <FlyOut.Toggle /> <FlyOut.List> <FlyOut.Item>Edit</FlyOut.Item> <FlyOut.Item>Delete</FlyOut.Item> </FlyOut.List> </div> </FlyOut> ); }

วิธีแก้ปัญหานี้คือการใช้รูปแบบองค์ประกอบผสมที่ยืดหยุ่นเพื่อแชร์สถานะโดยปริยายโดยใช้ React.createContext API

Context API ทำให้สามารถส่งผ่านสถานะ React ผ่านส่วนประกอบที่ซ้อนกันเมื่อสร้างโดยใช้รูปแบบส่วนประกอบผสมของส่วนประกอบอาคารใน React สิ่งนี้เป็นไปได้เนื่องจาก context ให้วิธีการส่งข้อมูลไปยังแผนผังองค์ประกอบโดยไม่ต้องส่งอุปกรณ์ประกอบฉากด้วยตนเองในทุกระดับ การใช้ Context API ช่วยเพิ่มความยืดหยุ่นให้กับผู้ใช้ปลายทาง

การรักษาส่วนประกอบที่เป็นสารประกอบในปฏิกิริยา

ส่วนประกอบแบบผสมให้วิธีการแชร์สถานะภายในแอปพลิเคชัน React ที่ยืดหยุ่นมากขึ้น ดังนั้นการใช้ส่วนประกอบแบบผสมในแอปพลิเคชัน React ของคุณทำให้ง่ายต่อการบำรุงรักษาและดีบักแอปของคุณจริงๆ

สร้างการสาธิต

ในบทความนี้ เราจะสร้างส่วนประกอบหีบเพลงใน React โดยใช้รูปแบบส่วนประกอบแบบผสม ส่วนประกอบที่เราจะสร้างในบทช่วยสอนนี้จะเป็น ส่วนประกอบหีบเพลงแบบกำหนดเอง ที่ยืดหยุ่นและแชร์สถานะภายในส่วนประกอบโดยใช้ Context API

ไปกันเถอะ!

ก่อนอื่น มาสร้างแอป React โดยใช้สิ่งต่อไปนี้:

 npx create-react-app accordionComponent cd accordionComponent npm start

หรือ

 yarn create react-app accordionComponent cd accordionComponent yarn start

คำสั่งด้านบนสร้างแอป React เปลี่ยนไดเร็กทอรีเป็นโครงการ React และเริ่มเซิร์ฟเวอร์การพัฒนา

หมายเหตุ : ในบทช่วยสอนนี้ เราจะใช้ styled-components เพื่อช่วยจัดรูปแบบองค์ประกอบของเรา

ใช้คำสั่งด้านล่างเพื่อติดตั้ง styled-components :

 yarn add styled-components

หรือ

 npm install --save styled-components

ในโฟลเดอร์ src ให้สร้างโฟลเดอร์ใหม่ชื่อ components นี่คือที่ที่ส่วนประกอบทั้งหมดของเราจะอยู่ ภายในโฟลเดอร์ ส่วนประกอบ ให้สร้างไฟล์ใหม่สองไฟล์: accordion.js และ accordion.styles.js

ไฟล์ accordion.styles.js มีการจัดสไตล์ของเราสำหรับส่วนประกอบ Accordion (การจัดสไตล์ของเราทำได้โดยใช้ styled-components )

 import styled from "styled-components"; export const Container = styled.div` display: flex; border-bottom: 8px solid #222; `;

ด้านบนคือตัวอย่างขององค์ประกอบการจัดรูปแบบโดยใช้ไลบรารี css-in-js เรียกว่า styled-components

ภายในไฟล์ accordion.styles.js ให้เพิ่มสไตล์ที่เหลือ:

 export const Frame = styled.div` margin-bottom: 40px; `; export const Inner = styled.div` display: flex; padding: 70px 45px; flex-direction: column; max-width: 815px; margin: auto; `; export const Title = styled.h1` font-size: 40px; line-height: 1.1; margin-top: 0; margin-bottom: 8px; color: black; text-align: center; `; export const Item = styled.div` color: white; margin: auto; margin-bottom: 10px; max-width: 728px; width: 100%; &:first-of-type { margin-top: 3em; } &:last-of-type { margin-bottom: 0; } `; export const Header = styled.div` display: flex; flex-direction: space-between; cursor: pointer; margin-bottom: 1px; font-size: 26px; font-weight: normal; background: #303030; padding: 0.8em 1.2em 0.8em 1.2em; user-select: none; align-items: center; img { filter: brightness(0) invert(1); width: 24px; user-select: none; @media (max-width: 600px) { width: 16px; } } `; export const Body = styled.div` font-size: 26px; font-weight: normal; line-height: normal; background: #303030; white-space: pre-wrap; user-select: none; overflow: hidden; &.closed { max-height: 0; overflow: hidden; transition: max-height 0.25ms cubic-bezier(0.5, 0, 0.1, 1); } &.open { max-height: 0px; transition: max-height 0.25ms cubic-bezier(0.5, 0, 0.1, 1); } span { display: block; padding: 0.8em 2.2em 0.8em 1.2em; } `;

มาเริ่มสร้างส่วนประกอบหีบเพลงกัน ในไฟล์ accordion.js ให้เพิ่มโค้ดต่อไปนี้:

 import React, { useState, useContext, createContext } from "react"; import { Container, Inner, Item, Body, Frame, Title, Header } from "./accordion.styles";

ด้านบน เรากำลังนำเข้า useState , useContext และ hooks createContext ซึ่งจะช่วยให้เราสร้างส่วนประกอบหีบเพลงโดยใช้ส่วนประกอบแบบผสม

เอกสารประกอบของ React อธิบายว่า context ช่วยให้สามารถส่งข้อมูลผ่านโครงสร้างส่วนประกอบโดยไม่ต้องส่งอุปกรณ์ประกอบฉากด้วยตนเองในทุกระดับ

เมื่อดูสิ่งที่เรานำเข้าก่อนหน้านี้ในไฟล์ accordion.js คุณจะสังเกตเห็นว่าเรานำเข้ารูปแบบของเราเป็นส่วนประกอบด้วย ซึ่งจะช่วยให้เราสร้างส่วนประกอบได้เร็วยิ่งขึ้น

เราจะดำเนินการต่อไปและสร้างบริบทสำหรับองค์ประกอบที่จะแบ่งปันข้อมูลกับส่วนประกอบที่ต้องการ:

 const ToggleContext = createContext(); export default function Accordion({ children, ...restProps }) { return ( <Container {...restProps}> <Inner>{children}</Inner> </Container> ); }

Container และส่วนประกอบ Inner จากข้อมูลโค้ดด้านบนมาจากไฟล์ . ./accordion.styles.js ซึ่งเราสร้างสไตล์สำหรับคอมโพเนนต์ของเราโดยใช้ styled-components (จากไลบรารี css-in-js ) ส่วนประกอบ Container เป็นที่เก็บ Accordion ทั้งหมดที่เรากำลังสร้างโดยใช้ส่วนประกอบแบบผสม

ที่นี่เรากำลังสร้างวัตถุบริบทโดยใช้ createContext() ดังนั้นเมื่อ React แสดงส่วนประกอบที่สมัครรับข้อมูลจากอ็อบเจกต์บริบทนี้ มันจะอ่านค่าบริบทปัจจุบันจากผู้ให้บริการที่ตรงกันที่ใกล้เคียงที่สุดที่อยู่ด้านบนสุดในทรี

จากนั้นเราก็สร้างส่วนประกอบพื้นฐานของเราซึ่งก็คือหีบเพลง มันต้องใช้ children และ restProps ใด ๆ นี่คือองค์ประกอบหลักของเราซึ่งมีส่วนประกอบย่อยของหีบเพลง

มาสร้างส่วนประกอบลูกอื่น ๆ ภายในไฟล์ accordion.js :

 Accordion.Title = function AccordionTitle({ children, ...restProps }) { return <Title {...restProps}>{children}</Title>; }; Accordion.Frame = function AccordionFrame({ children, ...restProps }) { return <Frame {...restProps}>{children}</Frame>; };

สังเกตว่า . หลังส่วนประกอบหีบเพลงหลัก; ใช้เพื่อเชื่อมต่อองค์ประกอบลูกกับองค์ประกอบหลัก

ไปต่อกันเลย ตอนนี้เพิ่มสิ่งต่อไปนี้ในไฟล์ accordion.js :

 Accordion.Item = function AccordionItem({ children, ...restProps }) { const [toggleShow, setToggleShow] = useState(true); return ( <ToggleContext.Provider value={{ toggleShow, setToggleShow }}> <Item {...restProps}>{children}</Item> </ToggleContext.Provider> ); }; Accordion.ItemHeader = function AccordionHeader({ children, ...restProps }) { const { isShown, toggleIsShown } = useContext(ToggleContext); return ( <Header onClick={() => toggleIsShown(!isShown)} {...restProps}> {children} </Header> ); }; Accordion.Body = function AccordionHeader({ children, ...restProps }) { const { isShown } = useContext(ToggleContext); return ( <Body className={isShown ? "open" : "close"}> <span>{children}</span> </Body> ); };

ดังนั้น ที่นี่ เรากำลังสร้างส่วนประกอบ Body , Header และ Item ซึ่งเป็นส่วนประกอบย่อยของส่วนประกอบหลัก Accordion นี่คือจุดที่มันอาจจะเริ่มยุ่งยาก นอกจากนี้ โปรดสังเกตว่าแต่ละองค์ประกอบย่อยที่สร้างที่นี่ยังได้รับอุปกรณ์ประกอบฉาก restprops และ children

จากองค์ประกอบลูก Item เราเริ่มต้นสถานะของเราโดยใช้ hook State ของ useState และตั้งค่าเป็น true จากนั้นให้จำไว้ว่าเราได้สร้าง ToggleContext ที่ระดับบนสุดของไฟล์ accordion.js ซึ่งเป็น Context Object และเมื่อ React แสดงส่วนประกอบที่สมัครรับข้อมูลจาก Context วัตถุ มันจะอ่านค่าบริบทปัจจุบันจากผู้ให้บริการที่ใกล้เคียงที่สุดที่อยู่ด้านบน ในต้นไม้.

ทุกอ็อบเจ็กต์บริบทมาพร้อมกับส่วนประกอบ Provider React ที่อนุญาตให้ส่วนประกอบที่ใช้สมัครรับการเปลี่ยนแปลงบริบท

องค์ประกอบของ provider ยอมรับข้อเสนอ value ที่จะส่งผ่านไปยังส่วนประกอบที่ใช้งานซึ่งเป็นลูกหลานของผู้ให้บริการรายนี้ และที่นี่เรากำลังส่งค่าสถานะปัจจุบันซึ่งเป็น toggleShow และวิธีการตั้งค่าสถานะปัจจุบัน setToggleShow ค่าเหล่านี้เป็นค่าที่กำหนดวิธีที่ออบเจ็กต์บริบทของเราจะแชร์สถานะรอบๆ ส่วนประกอบของเราโดยไม่ต้องเจาะเสา

จากนั้นในองค์ประกอบลูก header ของ Accordion เรากำลังทำลายค่าของวัตถุบริบท จากนั้นเปลี่ยนสถานะปัจจุบันของ toggleShow เมื่อคลิก ดังนั้นสิ่งที่เราพยายามทำคือซ่อนหรือแสดงหีบเพลงของเราเมื่อคลิกส่วนหัว

ในองค์ประกอบ Accordion.Body ของเรา เรากำลังทำลายระบบ toggleShow ซึ่งเป็นสถานะปัจจุบันของส่วนประกอบ จากนั้นขึ้นอยู่กับค่าของ toggleShow เราสามารถซ่อนเนื้อหาหรือแสดงเนื้อหาขององค์ประกอบ Accordion.Body

นั่นคือทั้งหมดสำหรับไฟล์ accordion.js ของเรา

นี่คือที่ที่เราจะได้เห็นว่าทุกสิ่งที่เราเรียนรู้เกี่ยวกับองค์ประกอบ Context และ Compound components มารวมกันได้อย่างไร แต่ก่อนหน้านั้น มาสร้างไฟล์ใหม่ชื่อ data.json แล้ววางเนื้อหาด้านล่างลงไป:

 [ { "id": 1, "header": "What is Netflix?", "body": "Netflix is a streaming service that offers a wide variety of award-winning TV programs, films, anime, documentaries and more – on thousands of internet-connected devices.\n\nYou can watch as much as you want, whenever you want, without a single advert – all for one low monthly price. There's always something new to discover, and new TV programs and films are added every week!" }, { "id": 2, "header": "How much does Netflix cost?", "body": "Watch Netflix on your smartphone, tablet, smart TV, laptop or streaming device, all for one low fixed monthly fee. Plans start from £5.99 a month. No extra costs or contracts." }, { "id": 3, "header": "Where can I watch?", "body": "Watch anywhere, anytime, on an unlimited number of devices. Sign in with your Netflix account to watch instantly on the web at netflix.com from your personal computer or on any internet-connected device that offers the Netflix app, including smart TVs, smartphones, tablets, streaming media players and game consoles.\n\nYou can also download your favorite programs with the iOS, Android, or Windows 10 app. Use downloads to watch while you're on the go and without an internet connection. Take Netflix with you anywhere." }, { "id": 4, "header": "How do I cancel?", "body": "Netflix is flexible. There are no annoying contracts and no commitments. You can easily cancel your account online with two clicks. There are no cancellation fees – start or stop your account at any time." }, { "id": 5, "header": "What can I watch on Netflix?", "body": "Netflix has an extensive library of feature films, documentaries, TV programs, anime, award-winning Netflix originals, and more. Watch as much as you want, any time you want." } ]

นี่คือข้อมูลที่เราจะใช้งานเพื่อทดสอบส่วนประกอบหีบเพลงของเรา

งั้นไปกันต่อเลย เราใกล้จะจบแล้วและผมเชื่อว่าคุณได้เรียนรู้อะไรมากมายจากการติดตามบทความนี้

ในส่วนนี้ เราจะรวบรวมทุกสิ่งที่เราได้ทำและเรียนรู้เกี่ยวกับส่วนประกอบแบบผสม เพื่อให้สามารถใช้งานได้ในไฟล์ App.js ของเรา เพื่อใช้ฟังก์ชัน Array.map เพื่อแสดงข้อมูลที่เรามีอยู่แล้วบนเว็บ หน้าหนังสือ. สังเกตด้วยว่าไม่มีการใช้สถานะภายใน App.js ; ทั้งหมดที่เราทำคือส่งต่อข้อมูลไปยังส่วนประกอบเฉพาะ และ Context API จะดูแลทุกอย่าง

ตอนนี้ไปยังส่วนสุดท้าย ใน App.js ของคุณ ให้ทำดังต่อไปนี้:

 import React from "react"; import Accordion from "./components/Accordion"; import faqData from "./data"; export default function App() { return ( <Accordion> <Accordion.Title>Frequently Asked Questions</Accordion.Title> <Accordion.Frame> {faqData.map((item) => ( <Accordion.Item key={item.id}> <Accordion.Header>{item.header}</Accordion.Header> <Accordion.Body>{item.body}</Accordion.Body> </Accordion.Item> ))} </Accordion.Frame> </Accordion> ); }

ในไฟล์ App.js ของคุณ เรานำเข้า Compound Component Accordion จากพาธของไฟล์ จากนั้นจึงนำเข้าข้อมูลจำลองของเรา จับคู่ผ่านข้อมูลจำลอง เพื่อให้ได้ไอเท็มแต่ละรายการในไฟล์ข้อมูลของเรา จากนั้นจึงแสดงตามที่เกี่ยวข้อง นอกจากนี้ คุณจะสังเกตเห็นว่าสิ่งที่เราต้องทำคือส่งลูกไปยังองค์ประกอบที่เกี่ยวข้อง Context API ดูแลเพื่อให้แน่ใจว่าส่วนประกอบไปถึงส่วนประกอบที่ถูกต้องและไม่มีการเจาะเสา

นี่คือลักษณะผลิตภัณฑ์ขั้นสุดท้ายของเรา:

ทางเลือกสู่ส่วนประกอบที่เป็นส่วนประกอบ

อีกทางเลือกหนึ่งสำหรับการใช้ส่วนประกอบแบบผสมคือการใช้ Render Props API คำว่า Render Prop ใน React หมายถึงเทคนิคในการแชร์โค้ดระหว่างส่วนประกอบ React โดยใช้ prop ที่มีค่าเป็นฟังก์ชัน องค์ประกอบที่มีอุปกรณ์ประกอบฉากแสดงผลใช้ฟังก์ชันที่ส่งคืนองค์ประกอบ React และเรียกใช้แทนที่จะใช้ตรรกะการเรนเดอร์ของตัวเอง

ในการส่งข้อมูลจากส่วนประกอบไปยังส่วนประกอบย่อยที่ต้องการข้อมูลอาจส่งผลให้มีการเจาะเสาเมื่อคุณมีส่วนประกอบที่ซ้อนกันอยู่ภายในกันและกัน นี่คือข้อได้เปรียบของการใช้บริบทเพื่อแบ่งปันข้อมูลระหว่างส่วนประกอบโดยใช้วิธีการแสดงพร็อพ

บทสรุป

ในบทความนี้ เราได้เรียนรู้เกี่ยวกับรูปแบบขั้นสูงของ React ซึ่งเป็นรูปแบบองค์ประกอบแบบผสม เป็นวิธีที่ยอดเยี่ยมในการสร้างส่วนประกอบที่นำกลับมาใช้ใหม่ได้ใน React โดยใช้รูปแบบส่วนประกอบแบบผสมเพื่อสร้างส่วนประกอบของคุณ มอบความยืดหยุ่นให้กับส่วนประกอบของคุณเป็นอย่างมาก คุณยังสามารถเลือกใช้ Render Prop ได้หากความยืดหยุ่นไม่ใช่สิ่งที่คอมโพเนนต์ของคุณต้องการในขณะนี้

ส่วนประกอบที่เป็นส่วนประกอบมีประโยชน์มากที่สุดในระบบการออกแบบอาคาร เรายังผ่านกระบวนการแชร์สถานะภายในส่วนประกอบโดยใช้ Context API

• รหัสสำหรับบทช่วยสอนนี้มีอยู่ใน Codesandbox