หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ปฏิกิริยาต้นไม้ที่ซับซ้อน

ส่วนประกอบต้นไม้ที่สามารถเข้าถึงได้โดยไม่ได้ตั้งใจพร้อมการเลือกหลายรายการและการลากและวาง

ดูเอกสารประกอบอย่างเป็นทางการเพื่อดูตัวอย่างเพิ่มเติมและเอกสารประกอบที่ครอบคลุมมากขึ้น ปัญหาหรือคำถามทั่วไปหลายประการจะกล่าวถึงในหน้าคำถามที่พบบ่อย

บันทึกการเปลี่ยนแปลงมีอยู่ที่ https://rct.lukasbach.com/docs/changelog ตรวจสอบบันทึกประจำรุ่น v2 เมื่อย้ายจาก v1.x เป็น v2.x

สปอนเซอร์

การพัฒนา react-complex-tree ได้รับการสนับสนุนจากชุมชน ขอขอบคุณเป็นพิเศษสำหรับ:



ค้นหาวิธีสนับสนุนการพัฒนา react-complex-tree

การติดตั้ง

หากต้องการเริ่มใช้ React Complex Tree ให้ติดตั้งลงในโปรเจ็กต์ของคุณเป็นการพึ่งพาผ่าน 

 npm install react-complex-tree
yarn add react-complex-tree

จากนั้นนำเข้าและเพิ่มโครงสร้างต้นไม้ของคุณด้วย 

 import { UncontrolledTreeEnvironment , Tree , StaticTreeDataProvider } from 'react-complex-tree' ;

< UncontrolledTreeEnvironment
  dataProvider = { new StaticTreeDataProvider ( longTree . items , ( item , data ) => ( { ... item , data } ) ) }
  getItemTitle = { item => item . data }
  viewState = { { } }
>
  < Tree treeId = "tree-1" rootItem = "root" treeLabel = "Tree Example" / >
< / UncontrolledTreeEnvironment > ;

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

คุณสมบัติ

  • ไม่มีความคิดเห็น

    React Complex Tree ไม่ได้ตั้งสมมติฐานใดๆ เกี่ยวกับความสวยงามของการออกแบบเว็บของคุณหรือเทคโนโลยีใดๆ ที่คุณใช้อยู่ การเรนเดอร์นั้นขึ้นอยู่กับคุณเอง และทุกโหนดที่เขียนไปยัง DOM ก็สามารถปรับแต่งได้ ค่าเริ่มต้นที่สมเหตุสมผลซึ่งจัดรูปแบบโดยคลาส CSS ที่ปรับแต่งได้ง่ายนั้นมีไว้เพื่อความสะดวกในการรวมระบบ

  • สามารถเข้าถึงได้

    โครงสร้างต้นไม้เป็นไปตามข้อกำหนดของ W3C สำหรับต้นไม้ที่สามารถเข้าถึงได้ รองรับโปรแกรมอ่านหน้าจอและใช้การโต้ตอบบนคีย์บอร์ดทั่วไปทั้งหมด เพื่อให้ทุกการโต้ตอบตั้งแต่การย้ายโฟกัสไปจนถึงการลากรายการต่างๆ สามารถทำได้โดยไม่ต้องใช้เมาส์

  • การลากและวางอันทรงพลัง

    แผนผังนี้มอบความสามารถที่คาดหวังที่ผู้ใช้ระดับสูงคาดหวังจากเครื่องมือขั้นสูง เลือกรายการได้มากเท่าที่คุณต้องการ และลากไปยังตำแหน่งใดก็ได้ภายในต้นไม้เดียวกันหรือต้นไม้อื่น! React Complex Tree มาพร้อมกับตัวเลือกการปรับแต่งมากมายสำหรับการลากและวาง เช่น การไม่อนุญาตให้เรียงลำดับใหม่ หรือการเปิดใช้งานการลากหรือวางบนบางรายการเท่านั้น

  • การควบคุมคีย์บอร์ดเต็มรูปแบบ

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

  • การพึ่งพาเป็นศูนย์

    เรารู้ว่าการเพิ่มแพ็คเกจและลงเอยด้วยการต้องพึ่งพาเพื่อนหลายร้อยคนนั้นน่ารำคาญเพียงใด เนื่องจาก React Complex Tree ไม่ได้ตั้งสมมติฐานเกี่ยวกับการพึ่งพาใดๆ ของคุณ เราจึงไม่จำเป็นต้องทำให้โปรเจ็กต์ของคุณยุ่งเหยิงด้วยแพ็คเกจเพิ่มเติม เมื่อเพิ่ม React Complex Tree ลงในแพ็คเกจของคุณ คุณจะต้องเพิ่มเฉพาะสิ่งนั้นและไม่มีการขึ้นต่อกันอื่น ๆ

  • การเลือกหลายรายการ

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

  • การเปลี่ยนชื่อในตัว

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

  • ฟังก์ชั่นการค้นหา

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

  • สภาพแวดล้อมแบบหลายทรี

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

  • อินเทอร์เฟซที่มีการควบคุมและไม่มีการควบคุม

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

  • ขับเคลื่อนโดย React และ TypeScript

    React Complex Tree ขับเคลื่อนโดย React (duh) และสามารถรวมเข้ากับโปรเจ็กต์ React ที่มีอยู่ได้อย่างง่ายดาย เพียงนำเข้าและใช้ส่วนประกอบที่ให้มา ข้อมูลประเภทที่ครอบคลุมจะได้รับเป็นอินเทอร์เฟซ TypeScript ซึ่งช่วยให้บูรณาการได้ง่ายขึ้นและให้ความปลอดภัยประเภทเพิ่มเติม ไม่ว่าคุณจะใช้ TypeScript ในโปรเจ็กต์ของคุณหรือไม่ก็ตาม

คำแนะนำในการมีส่วนร่วม

หากคุณต้องการพัฒนา RCT ในพื้นที่ คำแนะนำบางประการมีดังนี้:

  • ใช้ volta เพื่อให้แน่ใจว่าคุณได้ติดตั้งเวอร์ชัน NodeJS และ Yarn ที่เข้ากันได้
  • รัน yarn เพื่อติดตั้งการขึ้นต่อกัน
  • รัน yarn build หนึ่งครั้งในเครื่องก่อนรันคำสั่ง dev ใดๆ
  • Run yarn start เพื่อเริ่ม Docusaurus และแพ็คเกจในโหมด Watch และ/หรือ yarn storybook เพื่อรัน Storybook
  • ตรวจสอบให้แน่ใจว่าได้รัน linter และทดสอบก่อนที่จะพุชการเปลี่ยนแปลง
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด