Здравствуйте. Делаю проект на Реакте. Появилась задача создать функцию принимающую JSX с какой-то разметкой (например как на первой иллюстрации). Функция должна обернуть детей элемента <section> в условный <aside>, а в элементы <p> поместить компоненты (вторая иллюстрация). Как это можно реализовать?
В стандартном JS операции оборачивания и вставки элементов не вызывают трудностей. Но даже не представляю как это можно реализовать в логике Реакта.
Придумал такой сложный сценарий:
1. Функция принимает не JSX, то строку с разметкой.
2. Строка превращается в HTML-коллекцию в которой дети <section> оборачиваются в условный <aside>.
3. Готовую коллекцию превращаю в объект JavaScript где описаны теги, атрибуты и дети каждого элемента.
4. Объект прогоняется через рекурсивную функцию которая создаёт JSX и по ходу в каждый <p> вставляет компонент Реакта.
Такой сценарий мне не нравится потому что для решения такой простейшей задачи придется написать строчек 300 и подключить пару библиотек.