React: using React component inside of dangerouslySetInnerHTML
<p>I have a question about using React. As you can see from the title, I'm wondering if it is possible to use React component (that is created by <code>React.createClass</code>) inside of <code>dangerouslySetInnerHTML</code> property. I have tried, but React just prints code without transformation like this:</p>
<pre><code>const MySubComponent = React.createClass({
    render() {
        return (&lt;p&gt;MySubComponent&lt;/p&gt;);
    }
});

...

let myStringHTML;
myStringHTML += &quot;&lt;ul&gt;&quot;;
myStringHTML += &quot;    &lt;li&gt;&quot;;
myStringHTML += &quot;        &lt;MySubComponent /&gt;&quot;;
myStringHTML += &quot;    &lt;/li&gt;&quot;;
myStringHTML += &quot;&lt;/ul&gt;&quot;;

const MyComponent = React.createClass({
    render() {
        return (
            &lt;div dangerouslySetInnerHTML={{__html:myStringHTML}}&gt;&lt;/div&gt;
        );
    }
});
</code></pre>
<p>I expected</p>
<pre><code>&lt;ul&gt;
    &lt;li&gt;
        &lt;p&gt;MySubComponent&lt;/p&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p>but the code is just same as original string, and that means React didn't transform <code>MySubComponent</code>.</p>
<p>Is there a way to solve this problem? Above example is just simple but my actual code is quite complicated. It will be very thanks gimme a hand ;)</p>