ReactRouter - реквизиты от обработчиков до заголовка

Question

Я пытаюсь использовать React Router. Упрощенный пример, чтобы объяснить мой вопрос (в нижней части поста):

View1

var View1 = React.createClass({ 
    statics: { 
    headerAction: function() { 
     this.handleSomething(); 
    } 
    }, 

    handleSomething: function() { 
    this.setState(...); 
    }, 

    render: function() { 
    return (
     <div> 
     (...) 
     </div> 
    ); 
    } 
}); 

подобного класса для View2

App

var App = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <AppHeader /> 

     <RouteHandler/> 
     </div> 
    ); 
    } 
}); 

Router

var routes = (
    <Route name="app" path="/" handler={App}> 
    <Route name="view2" handler={View2}/> 
    <DefaultRoute handler={View1}/> 
    </Route> 
); 

Router.run(routes, function (Handler) { 
    React.render(<Handler/>, document.body); 
}); 

Я хочу, чтобы AppHeader находился в классе App (не в отдельных видах), потому что панель заголовка/панели всегда видна. Если это место класса класса, заголовок будет повторно монтирован каждый раз, когда маршрутизатор откроет другое представление. Однако реквизиты для этого компонента могут отличаться в зависимости от того, какой маршрут активен. Как и другое название, и значок с интерактивным действием, вызывающим что-то (изменение состояния) в представлении.

Я попытался найти хороший способ решить эту проблему, что означает различные опоры для AppHeader на основе того, какой класс представления является активным обработчиком маршрута. Поскольку класс представления является изменяющимся компонентом, я думал о его наличии в компонентах вида (View1/View2 в приведенном выше примере), даже если реквизит не будет использоваться в этом компоненте. Я посмотрел на то, что это как статика в этом компоненте, а затем извлечение их в Router.run, проблема в том, что я не могу вызывать обработчики событий в одном и том же компоненте (например, в примере View1), например кликабельные ссылки для заголовка, который сделать что-то в представлении.

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

Другой подход, о котором я думал, заключался в наличии одного хранилища Reflux для каждого представления (для каждого обработчика маршрутизатора) и наличия реквизитов для заголовка в отдельных магазинах и передачи их в заголовок компонента App. Но тогда мне нужно переключаться между магазинами для использования, исходя из того, какой маршрут активен. Я не нашел способ иметь отдельные магазины для каждого обработчика в дополнение к выбору магазина с помощью React Router.

Какой еще вариант для такого случая?

Answer 1

Не уверен, что это поможет, но я решил аналогичную проблему, используя <Link> от react-router.

render(){ 
    let to_obj={pathname:category.url, query:{text:category.text}} 
    <Link to={to_obj} className="cat-link"> 
    ..... 

Затем в пункте назначения, я уточняю название NavBar через ReactiveVar с

GlobalState.title.set(this.props.location.query.text)

Я не пробовал, но вы можете даже быть в состоянии передать функции/обработчики вниз.

Просто мысль.