你可以把内部组件放在一个数组中，迭代它们，然后呈现它们。

var React = require('react/addons');

// COMPONENTS
var TextBlock = require('../text_block.jsx');
var PaperHeader = require('../header_paper.jsx')
var SectionHeader = require('../header_section.jsx');
var TableOfContents = require('../table_of_contents.jsx');

var Page = React.createClass({

  render: function() {
    var contents = [
      <PaperHeader title={"Page Title"} authors={["Cole Gleason"]} />,
      <SectionHeader title={'First Section'} size={'large'} />,
      <TextBlock key={"text_first"}>
        <p>
          Text goes here.
        </p>
      </TextBlock>,
      <this.props.activeRouteHandler/>
    ];

    var titles = contents.map(function(item) {
      if (item.title && some_other_requirement) {
        return item.title;
      }
      return undefined;
    });

    return (
      <div>
        <TOC titles={titles} />
        {contents}  
      </div>
    );
  }
});

module.exports = Page;

但是我不禁觉得你并没有真正以正确的方式使用React。你把React组件当作简单的模板来对待。下面这样的事情更有意义：

var React = require('react/addons');

// COMPONENTS
var Page = require('../Page.jsx');
var Section = require('../Section.jsx');
var TextBlock = require('../TextBlock.jsx');

var App = React.createClass({
  render: function() {
    return (
      <Page title='Page title'>
        <Section title='Section title'>
          <TextBlock>
            <p>Text goes here</p>
          </TextBlock>
          <TextBlock>
            <p>Text goes here</p>
          </TextBlock>
        </Section>
        <this.props.activeRouteHandler />
      </Page>
    );
  }
});

module.exports = App;

给予东西正确的结构是很重要的。我认为这更有意义，因为现在父节点和子节点之间有了真实的的关系。属于一个节的文本块应该位于该节内部。现在这并不能解决目录问题，但它是一个开始。例如，现在Page的所有直接子节点都是Sections，这很有帮助。这样你就可以做更多的事情。
如果你想在运行时构建一个真实的的动态目录，你应该寻找另一个地方来存储你的内容。你现在把模板和内容混合在一起，这并不理想。React组件中的通信实际上只有一种方式（下树），因此试图将数据从一个组件传递回一个兄弟或父组件并不容易，也不是一个好主意。2请查看Flux，了解更多关于数据应该如何流动的信息。
另一个好的阅读：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0