Как избежать "снятия детской опоры" в контейнере на маршруте?

Question

У меня есть то, что мне кажется анти-паттерном, которого я хотел бы избежать.

У меня есть такие маршруты:

   <Route path="/" component={internationalise(App)} breadcrumbIgnore>

       <Route path="login" component={Login}/>
       <Route path="signup/:token" component={SignupConfirmation}/>
       {/* (ETC other non-logged in routes) */}

       <Route component={requireAuthentication(LoggedInBase)} breadcrumbIgnore>
           {/* Displaying projects and variations */}       
           <Route component={ProjectRoot} breadcrumbName="Projects">
               <Route path="projects" component={Projects}/>
               <Route path="projects/:projectId" component={Project} breadcrumbName="Project Details">

Промежуточными узлами в данном маршруте являются containers... они делают такие вещи, как получение необходимых данных из магазина и т. д. containers должны делать.

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

Но

render() {
   return(<this.props.children {...this.props}>)
}

не работает, потому что на этом этапе сам контейнер все еще дочерний!

Так что я делаю

render() {
   // (intermediate node render logic, then...)

   const childPage = React.Children.only(this.props.children)

    return(<div> {/* intermediate node rendering, then... */} 
             {React.cloneElement(childPage, {...nonChildProps(this.props)})}
           </div>
    )
}

с

const nonChildProps = (props) => {
    var {children, ...nonChildren} = props
    return nonChildren
}

Что довольно уродливо - я, должно быть, делаю что-то не так.

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

Answer 1

Анти-паттерн передает все подпорки (с разворотом) вниз по дереву.

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

Это, в свою очередь, исходит из соображений эффективности компонентов разных уровней, имеющих контейнеры, которые извлекают одни и те же базовые данные и помещают их в подпорки. "Получить общие данные и поставить их на подпорки как можно выше для эффективности".

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