导出/序列化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树发送到应该反序列化的后端，并使用相同的“组成”重新创建react组件

在后端处理后的最终结果应该是

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