0Pricing
Sveltejs Academy · บทเรียน

คอมโพเนนต์ประกอบร่วมกับ Context

สร้างคอมโพเนนต์หลายส่วนที่ใช้สถานะร่วมกันผ่านบริบท

คอมโพเนนต์ประกอบร่วมกับ Context เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน

คอมโพเนนต์แบบประกอบ

คอมโพเนนต์แบบประกอบคือ UI เชิงตรรกะหนึ่งชุดที่แบ่งออกเป็นคอมโพเนนต์ย่อยหลายตัวและทำงานประสานกัน เช่น Tabs + Tab + TabPanel

ใช้สถานะร่วมผ่านบริบท

คอมโพเนนต์แม่กำหนดสถานะร่วมไว้ในบริบท ส่วนคอมโพเนนต์ลูกอ่านสถานะนั้นผ่าน getContext

<!-- Tabs.svelte -->
setContext("tabs", { active, setActive });

คอมโพเนนต์ลูกอ่านบริบท

แท็บและ TabPanel แต่ละตัวดึง API ร่วมมาใช้งาน

<!-- Tab.svelte -->
const { active, setActive } = getContext("tabs");

การเชื่อมโยงแบบหลวม

คอมโพเนนต์ลูกไม่อ้างอิงคอมโพเนนต์แม่โดยตรง แต่สื่อสารกันผ่านบริบท

API ที่ประกอบได้

ผู้ใช้งานสามารถจัดเรียงและปรับแต่งคอมโพเนนต์ย่อยได้อย่างอิสระ

<Tabs>
  <TabList>
    <Tab id="a">A</Tab>
    <Tab id="b">B</Tab>
  </TabList>
  <TabPanel id="a">Content A</TabPanel>
  <TabPanel id="b">Content B</TabPanel>
</Tabs>

ตัวอย่าง

แท็บ หีบพับ เมนู กล่องรายการ และขั้นตอน

หลักการตั้งชื่อ

ใช้คำนำหน้าร่วมหรือการส่งออกผ่านเนมสเปซเพื่อให้เข้าใจได้ง่าย

import { Tabs, Tab, TabList, TabPanel } from "$lib/Tabs";

บริบทที่ปลอดภัยด้านชนิดข้อมูล

กำหนดคีย์สัญลักษณ์และชนิดข้อมูลสำหรับ API ร่วม

ข้อผิดพลาดเมื่อใช้งานผิดวิธี

หากคอมโพเนนต์ลูกไม่พบบริบท ให้แสดงข้อผิดพลาดที่เข้าใจง่ายเพื่อแนะนำผู้ใช้งาน

การนำกลับมาใช้ใหม่

คอมโพเนนต์แบบประกอบนำกลับมาใช้ใหม่ได้ดี เพราะผู้ใช้งานเป็นผู้ควบคุมการประกอบ

ใช้ร่วมกับตัวสร้าง

คอมโพเนนต์แบบประกอบมักใช้รูปแบบการสร้างภายในเพื่อรองรับความสามารถในการเข้าถึงแบบไร้ส่วนแสดงผล

ตรวจสอบความเข้าใจ

คอมโพเนนต์แบบประกอบแบ่งปันสถานะระหว่างกันอย่างไร

ทบทวน

คอมโพเนนต์แบบประกอบแบ่ง UI ออกเป็นคอมโพเนนต์ย่อยที่ประกอบกันได้ และประสานงานกันผ่านบริบท

คำถามที่พบบ่อย

บทเรียน “คอมโพเนนต์ประกอบร่วมกับ Context” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “คอมโพเนนต์ประกอบร่วมกับ Context” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “คอมโพเนนต์ประกอบร่วมกับ Context”

สร้างคอมโพเนนต์หลายส่วนที่ใช้สถานะร่วมกันผ่านบริบท คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “คอมโพเนนต์ประกอบร่วมกับ Context” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม

ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. Render Props ด้วย Snippet
  2. คอมโพเนนต์ลำดับสูง
  3. รูปแบบ Builder สำหรับ UI แบบไร้ส่วนแสดงผล
  4. คอมโพเนนต์ประกอบร่วมกับ Context
← กลับไปที่ Sveltejs Academy