Prezentare generală
JsonTree afișează fie o value JSON, fie o matrice de entries denumite. Furnizați toate etichetele pentru valori goale și extindere/restrângere, astfel încât aplicația dvs. să controleze textul.
Utilizare
id, o label și o value JSON. Utilizați intrări atunci când etichetele afișate diferă de cheile stocate. În mod implicit, sunt extinse nivelurile de adâncime 0 și 1. Suprascrieți shouldExpandNodeInitially={({ depth }) => depth === 0} pentru a extinde numai rădăcina; extinderea ulterioară este gestionată de fiecare nod.
getNodeHighlighting(keyPath) returnează blue, red, partial-blue sau undefined. onNodeValueClick primește textul afișat: valorile frunză ca șiruri și eticheta corespunzătoare pentru valori goale, pentru șiruri, matrice și obiecte goale. Arborele afișează datele și nu le editează.
Când este furnizat onNodeValueClick, valorile sunt butoane native denumite după textul lor afișat. Tab mută focalizarea la o valoare; Enter, Spațiu sau un clic cu un dispozitiv de indicare o activează. Fără callback, valorile rămân text neinteractiv. Butoanele pentru valori nu trimit formularele care le conțin.
Proprietăți
string
obligatoriu
Accessible label for the expand control on a collapsed node.
string
obligatoriu
Accessible label for the collapse control on an expanded node.
string
obligatoriu
Display text for an empty array.
string
obligatoriu
Display text for an empty object.
string
obligatoriu
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.