نظرة عامة
يعرضJsonTree إما value بتنسيق JSON أو مصفوفة من entries المُسمّاة. مرر جميع تسميات القيم الفارغة والتوسيع/الطي لكي يتحكم تطبيقك في النص.
استخدام
id وlabel وvalue بتنسيق JSON. استخدم الإدخالات عندما تختلف تسميات العرض عن المفاتيح المخزنة. يُوسّع الإعداد الافتراضي العمقين 0 و1. تجاوز shouldExpandNodeInitially={({ depth }) => depth === 0} لتوسيع الجذر فقط؛ ويكون التوسيع اللاحق مسؤولية كل عقدة.
تعيد getNodeHighlighting(keyPath) القيمة blue أو red أو partial-blue أو undefined. تتلقى onNodeValueClick النص المعروض: قيم الأوراق كسلاسل نصية، وتسمية القيمة الفارغة المطابقة للسلاسل النصية والمصفوفات والكائنات الفارغة. تعرض الشجرة البيانات ولا تعدّلها.
عند توفير onNodeValueClick، تكون القيم أزرارًا أصلية تُسمّى بالنص المعروض لها. ينقل Tab التركيز إلى قيمة؛ ويؤدي Enter أو Space أو النقر بالمؤشر إلى تنشيطها. من دون دالة الاستدعاء، تبقى القيم نصًا غير تفاعلي. لا ترسل أزرار القيم النماذج الحاوية.
الإزاحة
string
مطلوب
Accessible label for the expand control on a collapsed node.
string
مطلوب
Accessible label for the collapse control on an expanded node.
string
مطلوب
Display text for an empty array.
string
مطلوب
Display text for an empty object.
string
مطلوب
Display text for an empty string.
JsonTreeEntry[]
Named entries with stable id, label, and JSON value fields. Supply entries or value, not both.
GetJsonNodeHighlighting
Returns blue, red, or partial-blue highlighting for a node key path.
((valueAsString: string) => void)
Called with the clicked value as displayed: leaf values as strings, and the empty label for empty strings, arrays, and objects.
((params: ShouldExpandNodeInitiallyProps) => boolean)
Chooses initial expansion from the node keyPath and depth. The default expands the first two depths.
JsonValue
JSON value to display. Supply value or entries, not both.