Panoramica
JsonTree visualizza un value JSON oppure un array di entries denominati. Passa tutte le etichette per valori vuoti e per espandere/comprimere, affinché l’applicazione controlli il testo.
Utilizzo
id, un label e un value JSON. Usa le voci quando le etichette visualizzate differiscono dalle chiavi memorizzate. Per impostazione predefinita vengono espansi i livelli 0 e 1. Sostituisci shouldExpandNodeInitially={({ depth }) => depth === 0} per espandere solo la radice; l’espansione successiva è gestita da ciascun nodo.
getNodeHighlighting(keyPath) restituisce blue, red, partial-blue o undefined. onNodeValueClick riceve il testo visualizzato: i valori foglia come stringhe e l’etichetta vuota corrispondente per stringhe, array e oggetti vuoti. L’albero visualizza i dati e non li modifica.
Quando viene fornito onNodeValueClick, i valori sono pulsanti nativi denominati in base al testo visualizzato. Tab sposta lo stato attivo su un valore; Invio, Spazio o un clic del puntatore lo attivano. Senza il callback, i valori rimangono testo non interattivo. I pulsanti dei valori non inviano i moduli che li contengono.
Props
string
obbligatorio
Accessible label for the expand control on a collapsed node.
string
obbligatorio
Accessible label for the collapse control on an expanded node.
string
obbligatorio
Display text for an empty array.
string
obbligatorio
Display text for an empty object.
string
obbligatorio
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.