Рендеринг различного контента в масштабируемой форме

Question

У меня есть сценарий использования, в котором я хочу, чтобы на некоторых страницах отображалось <DefaultAppBar />, а на некоторых страницах, таких как «Настройки» и «Редактировать профиль», - <EditableAppBar /> (где одна является главной панелью приложения, а другая отображаетЗначок «X» и значок галочки для сохранения изменений)

ЦЕЛЬ - сделать это масштабируемым для команды разработчиков. В идеале , все, что им нужно сделать, это создать новый маршрут, использовать опору рендеринга на маршруте и передать действие Redux, которое изменяет часть глобального состояния.Компонент <AppShell /> затем проверяет этот фрагмент состояния и отображает соответствующий компонент панели приложения.Я хотел бы избежать необходимости копаться в каталоге (который уже довольно большой) и вызывать действие из метода componentWillMount ().

Временное решение состоит в том, чтобы написать мои маршруты следующим образом: (this.props.cantEdit - это передаточное действие, переданное константой, установленной в true или false

<Route
    exact
    path={profile}
    render={props => 
        <Profile candEdit={this.props.canEdit(editFalse)} {...props} />}
/>
<Route
    path={settings}
    render={props => 
        <UserSettings canEdit={this.props.canEdit(editTrue)} {...props} />}
/>

Я знаю, что это не самое лучшее - передача функции CALL в качестве подпорки. Но сейчасон работает и не вызывает никаких проблем. Что-то в этом роде было бы замечательно, поскольку действие по сути вызывается Route. Опять же, идея состоит в том, что все, что нужно сделать разработчику, это написать новый маршрут, передающий действие и переменную, иправильный компонент панели приложения отображается без необходимости копаться в конкретном файле компонента для написания метода.

Любые советы / рекомендации / различные подходы приветствуются!

Answer 1

Итак, я нашел решение использовать компонент более высокого порядка.В итоге HOC выглядел так:

import React from "react";

const ChangeHeader = (func, WrappedComponent) => {
  return class extends React.Component {
    componentWillMount = () => {
      func();
    };

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default ChangeHeader;

, а затем мои маршруты выглядели так:

<Switch>
    <Route exact path={app} component={ChangeHeader(this.props.editableFalse, Dashboard)} />
    <Route path={clientList} component={ChangeHeader(this.props.editableFalse, ClientList)} />
    <Route exact path={settings} component={ChangeHeader(this.props.editableFalse, Settings)} />
    <Route path={businessInfo} component={ChangeHeader(this.props.editableTrue, BusinessInfo)} />
    <Route path={availability} component={ChangeHeader(this.props.editableFalse, Availability)} />
    <Route component={Error} />
</Switch>

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