子组件中部分内容如何由父组件提供？

Question

提取手机端公共页头写成子组件Header.js，然后再每个页面中引用：

<Header (arg...) />

但是页头中有一部分code是功能菜单，里边有不同的菜单，比如（新增，编辑）等等，这一部分不能在组件中写死，所以想在父组件中写功能菜单的代码，可是不知道该怎么写、、

当前在父组件中：

import Header from '...';
class Parent extends React.components {
  render() {
    return (
      ...
      
      <Header
        pageTitle='首页',
        ...
      />
      
      ...
    );
  }
}

当前子组件中：

class Child extends React.components {
  render() {
    return (
      <AppBar>
        <Toolbar>
          <IconButton>
            <Icon />
          </IconButton>
          
          <Typography>{this.props.pageTitle}</Typography>
          
          <Menu ...>
            <MenuItem onClick={...}>新增</MenuItem>
          </Menu>
          
        </Toolbar>
      </AppBar>
    );
  }
}

我期望能这样做：

import Header from '...';
class Parent extends React.components {
  render() {
    return (
      ...
      
      <Header
        pageTitle='首页',
        ...
      >
        <Menu ...>
          <MenuItem onClick={...}>新增</MenuItem>
        </Menu>
      </Header>
      
      ...
    );
  }
}

也就是将

<Menu ...>
  <MenuItem onClick={...}>新增</MenuItem>
</Menu>

这一段在父组件中实现，不知该如何实现？

Answer 1

<div>
  /* 这里写功能菜单部分 code */
  // 这里的代码可以在组件的 props.children 中引用到
</div>

class Header extends React.Component{
    render(){
        return (
            <div>
                <div>标签内的内容：{props.children}</div>    
            </div>
        );
    }
}

Answer 2

不好意思 串了哈哈哈 props.children