React uses children to nest components, how to get the parent component props

background description: if you want to nest components through children, how to get props

I know to change the following map, but I haven"t learned it yet and I don"t know how to change it. I also know that writing HomeHeader into HomePage components can solve the problem, but I hope it can be more elegant, nested in children, and look more comfortable in index.

question: how does HomeHeader get the props.config in HomePage

the code is as follows

// 
<HomePage>
  <HomeHeader />
</HomePage>


// 
// HomePage
static defaultProps = {
  config: "aaa"
}

<div>
  {React.Children.map(children, child => {
    return child
  })}
</div>

//  
// HomeHeader
<div>
  header
</div>



Mar.30,2021

<div>
  {React.Children.map(children, child => {
    return React.cloneElement(child,
         {
           config: this.props.config
         },
     );
  })}
</div>

HomeHeader directly this.props.config value


pass it down through props


// 
// HomePage
static defaultProps = {
  config: 'aaa'
}

<div>
  {React.Children.map(children, Child => {
    return <Child config={config}/>
  })}
</div>

//  
// HomeHeader
<div>
  header
</div>


// 
<HomePage>
  <HomeHeader />
</HomePage>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b40ac0-348fa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b40ac0-348fa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?