Обзор
JsonTree отображает либо JSON value, либо массив именованных entries. Передавайте все метки пустых значений и разворачивания/сворачивания, чтобы ваше приложение управляло текстом.
Использование
id, label и JSON value. Используйте записи, когда отображаемые метки отличаются от сохраненных ключей. По умолчанию разворачиваются уровни вложенности 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.