Как передать реквизит детям React Router?

Question

Я проверил это link

До сих пор я не мог понять часть handler. Значит, я надеялся на более простой пример?

Вот мой главный родительский компонент:

class appTemplate extends React.Component { 
    render() { 
     return (
      <div> 
       <Header lang={this.props.route.path}/> 
       {this.props.children} 
       <Footer lang={this.props.route.path}/> 
      </div> 
     ); 
    } 
} 

То, что я хочу сделать, это пройти вниз опору this.props.route.path моих дочерних компонентов которых является this.props.children.

Я не очень хорошо знаком со всеми условиями, хотя я уже несколько раз касался Реагирования в течение последних нескольких месяцев.

Приведенный выше пример с надлежащим объяснением будет оценен по достоинству. Благодарю.

Answer 1

правильного способ достижения этой цели является использование React.Children.map()

Answer 2

React имеет функцию cloneElement. Идея заключается в том, чтобы клонировать объект дети, проходя по пути как часть реквизита:

class appTemplate extends React.Component { 
    render() { 
     let children = null; 
     if (this.props.children) { 
      children = React.cloneElement(this.props.children, { 
      path: this.props.route.path 
      }) 
     } 
     return (
      <div> 
       <Header lang={this.props.route.path}/> 
       {children} 
       <Footer lang={this.props.route.path}/> 
      </div> 
     ); 
    } 
} 

Затем вы должны быть в состоянии получить доступ к пути с помощью this.props.path в дочерний элемент, но (от того, что я помню) не изнутри элементов, вложенных в дочерний элемент.

Вы можете прочитать больше о клонировании и передаче значений здесь: https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement