react 通过children 方式嵌套组件， 怎么拿父组件props

Question

背景描述：想通过children 方式嵌套组件， 怎么拿props

我知道要改下面这个 map 但是学的还不深入 不知道怎么改，我也知道把 HomeHeader 写进 HomePage组件里面 能解决， 但是我希望更优雅一点，通过children 方式嵌套，在index里面看起来更舒服点.

问题： HomeHeader 怎么拿到 HomePage 里面的props.config

代码如下

// 页面嵌套方式<HomePage>
  <HomeHeader />
</HomePage>// 父组件// HomePagestatic defaultProps = {
  config: 'aaa'}

<div>
  {React.Children.map(children, child => {    return child
  })}
</div>// 子组件 // HomeHeader<div>
  header
</div>




Answer 1

<div> &nbsp;&nbsp;{React.Children.map(children,&nbsp;child&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;React.cloneElement(child, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;config:&nbsp;this.props.config &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;})} </div>HomeHeader中直接&nbsp;this.props.config&nbsp;取值

Answer 2

//&nbsp;父组件//&nbsp;HomePagestatic&nbsp;defaultProps&nbsp;=&nbsp;{&nbsp;&nbsp;config:&nbsp;'aaa'} <div> &nbsp;&nbsp;{React.Children.map(children,&nbsp;Child&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<Child&nbsp;config={config}/> &nbsp;&nbsp;})} </div>//&nbsp;子组件&nbsp;//&nbsp;HomeHeader<div> &nbsp;&nbsp;header </div>//&nbsp;页面嵌套<HomePage> &nbsp;&nbsp;<HomeHeader&nbsp;/> </HomePage>