title: Inject component into another component
body: <p>What is the preferred way to inject a component into another component? I have an Object Oriented application structure where a View only knows about its parent View.
  Because all my components are 'dynamic' components I do not know the component structure beforehand.</p>
  
  <p>I tried it in two different ways with the following shared code:</p>
  
  <pre><code>/** @jsx React.DOM */
  var component = React.createClass({
      render: function () {
          return (
              &lt;div&gt;
                  .. many elements here ..
                  {this.props.children}
              &lt;/div&gt;
          );
      }
  });
  var subcomponent = React.createClass({
      render: function () {
          return (
              &lt;div&gt;test&lt;/div&gt;
          );
      }
  });
  
  var parentView = React.renderComponent(
      &lt;component&gt;.. subelements&lt;/component&gt;,
      document.getElementById('reactContainer')
  );
  </code></pre>
  
  <p><strong>1. Multiple components rendered</strong></p>
  
  <pre><code>var subView = React.renderComponent(
      &lt;subcomponent /&gt;,
      parentView.getDOMNode()
  );
  </code></pre>
  
  <p>The problem with this is that the super components inner html is replaced by the injected component. Also other errors are popping up. Seems like this is not the React-way of doing this.</p>
  
  <p><strong>2. Inject subcomponent via setProp with single renderComponent</strong></p>
  
  <p>Another approach is to set the children prop.</p>
  
  <pre><code>parentView.setProps({
      children: &lt;subcomponent /&gt;
  });
  </code></pre>
  
  <p>This works almost as expected, but also has some drawbacks. It is resetting the children to only the injected component. I could work around this by:</p>
  
  <pre><code>parentView.setProps({
      children: [parentView.props.children, &lt;subcomponent /&gt;]
  });
  </code></pre>
  
  <p>But now the childView is managing the children of its parent. But I could extract this to a method on the parentView.</p>
  
  <p>Another drawback is that when the view-depth is deeper than 2, the reference to the React component is gone because only the rootView is rendered via <code>React.renderComponent</code> and thus I can only do setProps on the rootview.</p>
  
  <p>I think I need a <code>React.renderComponent</code> for every view, but I don't know a way of how to inject it in the parent.</p>