Component.jsx

var Component = React.createClass({
  render() {
    return (
      <Layout>
        <View title="Deeply Nested">
          <div className="content">Example of a deeply nested thing</div>

          <View title="Deeply">
            <div className="content">This is the first nested drawer</div>

            <View title="Nested">
              <div className="content">This is the second deeply nested</div>

              <View title="Views">
                <div className="content">Final deeply nested view</div>

              </View>
            </View>
          </View>
        </View>
      </Layout>
    );
  }
});

Output.html

<div id="layout">
  <div id="titlebar">
    <span>Deeply Nested</span>
    <span>Deeply</span>
    <span>Nested</span>
    <span>Views</span>
  </div>
  
  <div class="content">
    Example of a deeply nested thing
  </div>
  
  <div class="subView">
    <div class="content">This is the first nested drawer</div>
    
    <div class="subView">
      <div class="content">This is the second deeply nested</div>
      
      <div class="subView">
        <div class="content">Final deeply nested view</div>
      </div>
    </div>
  </div>
</div>

Main idea being that the Layout component would be able to access the title attributes of each <View> and loop through them to place them into a series of spans inside of itself.