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

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 проходит через реквизит).

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

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