Есть ли способ делиться между

121
6

У меня есть четыре компонента: Panel, PanelHeader, PanelBody, PanelFooter которые состоят из следующих 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()). Я могу связать их все с редукцией, но это слишком сложно. Еще одно решение - создать объект non-React для совместного использования состояния, но в этом случае мне нужно будет очистить этот объект, чтобы преодолеть утечки памяти. Связь с redux также будет сложной. Этот подход выглядит не очень чистым для меня. Я также могу обманывать прозрачным фоном, так что у меня может быть одна Panel но несколько PanelHeader и т.д. Но в этом случае мне нужно будет распространить знания об анимации на все дочерние компоненты.

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

спросил(а) 2021-01-19T18:25:41+03:00 2 месяца, 3 недели назад
1
Решение
98

Похоже, вы могли бы воспользоваться этим 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>
}

Вы можете прочитать больше о Реагировать детей здесь.

ответил(а) 2021-01-19T18:25:41+03:00 2 месяца, 3 недели назад
43

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

ответил(а) 2021-01-19T18:25:41+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема