Как передать опору родному брату в реактиве?

Question

У меня есть designed a pretty simple responsive layout (не забудьте открыть ссылку с Chrome), и теперь я пытаюсь реализовать его в React. Я также приложил несколько скриншотов к макету.

Это приложение должно быть типичным приложением табуляции/навигации, но из-за гибкого макета иерархия представлений довольно неудобна для работы с React.

Я построил реактивный компонент под названием Layout, чтобы отвлечь все материалы макета. В макете также имеются реквизиты для renderLeft, renderRight, title и onTab. Затем дети макета отображаются в блоке содержимого.

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

Итак, теперь проблема в том, что у меня есть Layout компонент с целью оказанных в качестве ребенка (но вроде как собрата по отношению к App компоненте), но вид должен указать renderLeft, renderRight и title для макета который является его родителем! Например, в компоненте верхнего уровня App функция рендеринга может выглядеть следующим образом, и мне нужен способ настройки макета renderLeft с View.

render() { 
    return (
     <Layout renderLeft={??}> 
      <View setRenderLeft={??}/> 
     <Layout/> 
    ) 
} 

Единственное, я думал до сих пор, кажется, совершенно как неправильный способ сделать это:

В компоненте верхнего уровня App, имеют переменные состояния для renderLeft, renderRight и title и App передает их на опоры . Теперь для просмотра передайте некоторые функции, такие как setRenderLeft, setRenderRight и setTitle, которые изменят состояние App и таким образом изменят Layout. Таким образом, мы можем назвать эти функции в componentWillMount для каждого вида.

Это похоже на общий взлом и, кажется, нарушает всю идею однонаправленного потока данных. Однако я не знаю, как это сделать! Есть ли более правильные способы сделать это? Мне напоминают концепцию делегирования при создании приложений для iOS, но это очень OOP и не очень FP.

Любые идеи?

Answer 1

Ваш вопрос немного трудно сказать, что именно этот вопрос, однако, если бы я тебя, я бы читать на https://facebook.github.io/react/tips/communicate-between-components.html

Для связи между двумя компонентами которые не имеют отношения родитель-ребенка, вы можете настроить собственное глобальное событие . Подпишитесь на события в компонентеDidMount(), отмените подписку на componentWillUnmount() и вызовите setState(), когда вы получаете событие. Паттерн потока является одним из возможных способов его организации.

Вы хотите, чтобы братья и сестры разговаривали с родителем и общались там, или на глобальном уровне.

Надеюсь, это поможет.