reactjs: wrapping existing html into a component

Question

Given existing html.

<component text="one"><h1>First Component</h1></component>
<component text="two"><h1>Second Component</h1></component>
<component text="three"><h2>Third Component</h2></component>

I wish to wrap these components in a react class, that obtains the text property from the existing DOM. In addition, the existing markup should be rendered inside the component.

I have a partially working solution:

import * as React from "react";
import * as DOM from "react-dom";
import $ from "jquery";

export interface IWellProps {
    text: string
}

export class Well extends React.Component<IWellProps, {}> {
    render() {
        return <div>
            <span>{this.props.text}</span>
            <div>{this.props.children}</div>
        </div>;
    }
}

$("component")
    .each((i, e) => {
        DOM.render(<Well text={$(e).attr("text")}>{$(e).html()}</Well>, e);
        // version below renders html... the above does not.
        // is there not an api to convert text into `react.createElement` calls
        // DOM.render(<Well text={$(e).attr("text")}><h1>test</h1></Well>, e);
    });

My current implementation partially works, but uses a jquery hack? to create the components. I have a hunch that there will be some blowback when the components start using events and other react complexities.

• The text property is rendered from the original html as expected.
• The inner html is rendered as text not html.