Javascript 函数作为子函数无效。-React中的功能成分

我目前正在尝试将Patternfly React集成到我的项目中。是我用来参考的链接，它运行良好。但是页眉、页脚、topnav和sidenav需要单独的组件。因此，在将代码划分为组件时，我遇到了如下问题

提供给

页面边栏的道具导航无效，应为一个节点

这是我的Sidenav代码

import ReactDOM from 'react-dom';
import "@patternfly/react-core/dist/styles/base.css";
import '../../app/fonts.css';

import React from 'react';
import {  
  Nav,
  NavExpandable,
  NavItem,
  NavList  
} from '@patternfly/react-core'; 

function SideNav() {

    this.state = { 
      activeGroup: 'grp-1',
      activeItem: 'grp-1_itm-1'
    }; 

    this.onNavSelect = result => {
      this.setState({
        activeItem: result.itemId,
        activeGroup: result.groupId
      });
    }; 

    const { activeItem, activeGroup } = this.state;

    const PageNav = (
      <Nav onSelect={this.onNavSelect} aria-label="Nav" theme="dark">
        <NavList>
          <NavExpandable title="System Panel" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
            <NavItem groupId="grp-1" itemId="grp-1_itm-1" isActive={activeItem === 'grp-1_itm-1'}>
              Overview
            </NavItem>
            <NavItem groupId="grp-1" itemId="grp-1_itm-2" isActive={activeItem === 'grp-1_itm-2'}>
              Resource usage
            </NavItem>
            <NavItem groupId="grp-1" itemId="grp-1_itm-3" isActive={activeItem === 'grp-1_itm-3'}>
              Hypervisors
            </NavItem>

          </NavExpandable>
        </NavList>
      </Nav>
    );


        return (PageNav);


}

export default SideNav;

从“react dom”导入ReactDOM；
导入“@patternfly/react core/dist/styles/base.css”；
导入“../app/fonts.css”；
从“React”导入React；
导入{
导航，
导航可扩展，
纳维坦，
导航列表
}来自“@patternfly/react core”；
函数SideNav（）{
this.state={
活动组：“grp-1”，
活动项：“grp-1_itm-1”
}; 
this.onNavSelect=result=>{
这是我的国家({
activeItem:result.itemId，
activeGroup:result.groupId
});
}; 
const{activeItem，activeGroup}=this.state；
常量页面导航=(
概述
资源利用
管理程序
);
返回（PageNav）；
}
导出默认侧导航；

上面是我的sideNav功能组件，并在布局组件中使用它

我的标题组件

import "@patternfly/react-core/dist/styles/base.css";
import '../../app/fonts.css';

import React from 'react';
import {  
  Page,
  PageHeader,
  PageSection,
  PageSectionVariants,
  PageSidebar, 
  TextContent,
  Text, 
} from '@patternfly/react-core';

import SideNav from '../sideNav/sideNav'; 

class Layout extends React.Component {

  render() {

    const Header = (
      <PageHeader 
        toolbar={PageToolbar} 
        showNavToggle
      />
    );
    const Sidebar = <PageSidebar nav={SideNav} theme="dark" />;


    return (
      <React.Fragment>
        <Page
          header={Header}
          sidebar={Sidebar} 
          mainContainerId={pageId}
        >
          <PageSection variant={PageSectionVariants.light}>
            <TextContent>
              <Text component="h1">Main title</Text>
              <Text component="p">
                Body  
              </Text>
            </TextContent>
          </PageSection>

        </Page>
      </React.Fragment>
    );
  }
}

export default Layout;

import“@patternfly/react-core/dist/styles/base.css”；
导入“../app/fonts.css”；
从“React”导入React；
导入{
页
页眉，
第页，
第二页：，
页面侧栏，
文本内容，
文本，
}来自“@patternfly/react core”；
从“../SideNav/SideNav”导入SideNav；
类布局扩展了React.Component{
render（）{
常数头=(
);
常量边栏=；
返回(
主标题
身体
);
}
}
导出默认布局；

问题是在nav属性中将我的函数组件传递给Patternfly的PageSidebar组件时
const侧边栏=

这到底是怎么回事？
查看中的代码，
的
nav
属性设置为一些React元素（一些JSX），而不是React组件（返回一些JSX的函数）

我想您不应该使用
nav={Sidenav}
，而应该使用
nav={}
，使代码与示例匹配