วิดเจ็ตเอกสารประกอบแอป - React

เราได้อธิบายบางส่วนของ ประโยชน์ของเอกสารแบบมีบริบท docid\ jz lswt6b jdy38m8dpd7 ในบทก่อนหน้านี้ คู่มือนี้ทำหน้าที่เป็นทางเลือกสำหรับ react และ nextjs แอปเพื่อผสานรวมวิดเจ็ตแอปของ archbee ในวิธีที่ประณีตยิ่งขึ้น ผสานรวมวิดเจ็ตแอป ติดตั้ง แพ็กเกจ npm ของเรา https //www npmjs com/package/@archbee/app widget # with npm $ npm install save @archbee/app widget \# or with yarn $ yarn add @archbee/app widget เมื่อติดตั้งแพ็กเกจแล้ว ให้ไปที่ไฟล์ jsx/tsx และสร้าง component ขึ้นมา react import react from 'react'; import { archbeeappwidget, abwidgetref } from '@archbee/app widget' function app() { const widgetref = useref\<abwidgetref>(null); return ( \<div> \<archbeeappwidget ref={widgetref} spaceid={ / published space id / } onwidgetopen={() => { / / }} // callback function called after widget has open onwidgetclose={() => { / / }} // callback function called after widget has open \> \<button type='button' onclick={() => { \<! opens widget > widgetref current? open(); }}> open \</button> \<button type='button' onclick={() => { \<! closes widget > widgetref current? close(); }}> close \</button> \<button type='button' onclick={() => { \<! gets the instance of the widget if needed for various event manipulations > widgetref current? instance(); }}> get widget instance \</button> \</archbeeappwidget> \</div> ); } คุณยังสามารถอ้างอิงข้อมูลจาก การตั้งค่าสเปซ เลือก space ของคุณภายใน editor คลิกที่ไอคอนรูปเฟือง (⚙️) เพื่อเข้าไปที่ การตั้งค่า ไปที่ การเชื่อมต่อวิดเจ็ต คลิกที่แท็บ react จากนั้นคลิกปุ่มคัดลอก และวางโค้ดลงในไฟล์ tsx/ jsx ของคุณ ตอนนี้วิดเจ็ตจะจัดการทุกอย่างเบื้องหลังให้เอง ไม่ต้องกังวล ทุกอย่างถูกรวมและย่อขนาดแล้ว ไฟล์มีขนาดเพียง 56kb และโหลดแบบอะซิงโครนัส ดังนั้นผู้ใช้ของคุณจะไม่รู้สึกถึงความแตกต่าง พร็อปของคอมโพเนนต์ คุณสมบัติ ประเภท จำเป็น คำอธิบาย spaceid string จำเป็น ใส่ไอดีที่คุณต้องการเพื่อโหลดเอกสารของคุณ docid string ไม่จำเป็น เอกสารที่คุณต้องการเปิด widget docs หาก docid ถูกส่งมา widgettype จะถูกละเว้น และจะเปิดในโหมด docs ไม่ว่าค่าที่ส่งมาจะเป็นอะไร shareabletoken string ไม่จำเป็น ส่ง shareabletoken จากลิงก์ส่วนตัวของคุณเพื่อปกป้องเอกสารของคุณ classname string ไม่จำเป็น ส่งคลาส css ให้กับตัวครอบ div โทเค็นที่สามารถแชร์ได้มีอยู่ใน แผน scaling https //www archbee com/pricing อ่านเพิ่มเติมเกี่ยวกับ การควบคุมการเข้าถึงสาธารณะ docid 23p5vugc9lgzbsgmmd7aj วิธีการใช้อ้างอิง (ref methods) ถ้า ref ไม่ได้ถูกส่งไปยัง archbeeappwidget , องค์ประกอบย่อยจะเปิดหน้าต่างป๊อปอัปโดยอัตโนมัติเมื่อถูกคลิก คุณสมบัติ ชนิด คำอธิบาย เปิด เมธอด เปิดวิดเจ็ตด้วยโปรแกรม ปิด เมธอด ปิดวิดเจ็ตด้วยโปรแกรม อินสแตนซ์ เมธอด ส่งคืนอินสแตนซ์ของวิดเจ็ต