Хочу создать
такой компонент.
Его описание приходит ко мне в виде JSON, примерно такого:
interface TreeItem {
id: number;
name: string;
children: TreeItem[];
}
const myTree: TreeItem[] = [
{
id: 101,
name: 'Name 1',
children: [
{
id: 102,
name: 'Name 2',
children: [
{
id: 103,
name: 'Name 3',
children: []
},
{
id: 104,
name: 'Name 4',
children: []
}
]
}
]
},
{ ... следующий элемент ... }
];
Т.е. есть вложенные элементы неизвестной заранее степени вложенности.
Я могу рекурсивно пробежать по этому описанию и составить строку в синтаксисе JSX-элемента. Но как эту строку преобразовать в собственно элемент? Я пытался использовать
<div dangerouslySetInnerHTML={{__html: myHtmlString}}/>
, но эта штука понимает только стандартные HTML-тэги, а библиотека использует свои.
Если делать не через строку, а сразу
ReactNode, то можно использовать
React.createElement() , но у меня пока нет идеи как победить вложенность.
В общем, через строку мне было бы проще. Есть ли у Реакта средства для этого?
Простой
