Создание динамического оглавления в ReactJS

Question

У меня есть компонент, представляющий страницу с несколькими компонентами SectionHeader в качестве дочерних элементов этой страницы. Я хочу динамически создавать оглавление, проверяя дочерние страницы страницы, которые являются SectionHeaders.

<Page> 
    <TaleOfContents sections={this.props.children} /> 

    <SectionHeader title={"Section A"} /> 
    <TextBlock> 
    <p> Text here. </p> 
    </TextBlock> 

    <SectionHeader title={"Section B"} /> 
    <TextBlock> 
    <p> Text here. </p> 
    </TextBlock> 
</Page> 

К сожалению, this.props.children не определен. Есть ли способ динамически получить этих детей страницы и отобразить их в TableOfContents?

Редактировать: Вот мой компонент страницы. Это действительно просто большой метод визуализации, чтобы связать кучу других компонентов вместе.

/** @jsx React.DOM */ 

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() { 
    return (
     <div> 
     <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/> 
</div> 
); 
} 
}); 

module.exports = Page; 

Answer 1

Вы можете поместить внутренние компоненты в массив, перебрать их и затем визуализировать. Что-то вроде этого:

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 действительно идет только в одном направлении (вниз по дереву), поэтому попытка передать данные из компонента обратно в родную или родительскую нелегко и не очень хорошая идея. Посмотрите на Flux, чтобы узнать больше о том, как ваши данные должны течь.

Другое хорошее читает: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0