Экспорт / сериализация дерева React Dom

Question

Я ищу способ экспортировать dom-дерево реакции с компонентами.

Иметь базовый пример:

export default class App extends Component {


    render() {
        function __handleSerialize(e) {
            e.preventDefault();

            // here to get all nodes under this.refs.content
        }

        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <button onClick={__handleSerialize.bind(this)}>Serialize</button>
                        <div className="card" ref="content">
                            <div className="card-body">
                                <Example someProp={{test: 123} />
                                <Example2><Example /></Example2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

И получить сериализованное что-то вроде:

Это позволит отправить дерево dom на сервер, где оно должно быть десериализовано, и воссоздать реагирующий компонент с той же «композицией»

И конечный результат послеобработка в бэкэнде должна быть

import React from "react"

const App = () => (
<div className="card">
    <div className="card-body">
        <Example someProp={{test: 123} />
        <Example2><Example /></Example2>
    </div>
</div>
)

export default App