Есть ли способ, доля государства между

Question

У меня есть четыре компонента: Panel, PanelHeader, PanelBody, PanelFooter они состоят в следующем:

<Panel> 
    <PanelHeader> 
     some title 
    </PanelHeader> 
    <PanelBody> 
     <div> 
      main content 
     </div> 
    </PanelBody> 
    <PanelFooter> 
     footer content 
    </PanelFooter> 
</Panel> 

У меня также есть несколько маршрутов, где я хочу видеть, что Panel, но с различным содержанием.

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

Но в моем случае я хочу добавить некоторую морфинговую анимацию между маршрутами (изменить высоту панели, тело слайда, нижний колонтитул и т. Д.). Для этого мне нужно отобразить все содержимое точно таким же образом: Panel, PanelHeader, PanelBody, PanelFooter экземпляров, поэтому решение выше не будет работать.

Так что мне нужно разделить компонент маршрута на три компонента для каждого PanelXXX, и проблема в том, что эти компоненты должны реагировать друг на друга событиями.

Есть следующие моменты до сих пор:

• Я не могу создать еще один компонент, один посредник контролировать эти три частичных компонентов, потому что не сможет получить доступ к своему API, пока она не будет оказана (поэтому я не могу реализовать методы getter, например getHeader()).
• Я могу соединить их все с редуксом, но это слишком сложно.
• Еще одно решение - создать объект, не являющийся объектом React, для совместного использования состояния, но в этом случае мне нужно будет очистить этот объект, чтобы преодолеть утечки памяти. Связь с redux также будет сложной. Этот подход выглядит не очень чистым для меня.
• Я также могу обмануть прозрачный фон, чтобы у меня был один Panel, но несколько PanelHeader и т. Д. Но в этом случае мне нужно будет распространить знания об анимации на все дочерние компоненты.

Кто-нибудь знает какой-либо другой подход, чтобы сделать это в Реагировании? Или я должен выбрать один из пунктов выше?

Answer 1

Я думаю, что сценарий, который вы описываете, и вопросы, которые вы задаете, являются точными рационализациями для использования Flux. Redux - один из вариантов. Мы использовали обычную реализацию Flux Vanilla, используя оригинальную библиотеку Facebook, и у нас был большой успех.У этого есть крутая кривая обучения, но как только вы обнимаете его, такие проблемы, как тот, с которым вы столкнулись, просто вписываются в инфраструктуру.

Answer 2

Похоже, вы могли бы воспользоваться this.props.children.

маршрутизатор

<Router history={createBrowserHistory()}> 
    <Route path="/" component={App}> 
     <IndexRoute component={DefaultView} /> 
     <Route path="foopath" component={FooView} /> 
     <Route path="barpath" component={BarView} /> 
    </Route> 
</Router> 

App.js

... 

render: function() { 
    return (
     <Panel> 
      {this.props.children} 
     </Panel> 
    ); 
} 

... 

DefaultView.js

render: function() { 
    <div> 
     <PanelHeader> 
      FooHeader 
     </PanelHeader> 
     <PanelBody> 
      FooContent 
     </PanelBody> 
     <PanelFooter> 
      FooFooter 
     </PanelFooter> 
    </div> 
} 

Вы можете прочитать больше о Re act's детиhere.