函数作为React子级无效.-React中的功能组件



我目前正在尝试将Patternfly React集成到我的项目中。这是我用来参考的链接,运行良好。但需要为页眉、页脚、顶部导航和侧面导航提供单独的组件。因此,在将代码划分为组件时,我会遇到的问题

提供给PageSidebar的道具导航无效,应为ReactNode。

这是我的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;

以上是我的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;

问题是将我的函数组件传递到导航属性中Patternfly的PageSidebar组件时CCD_ 2。

这到底是怎么回事?

查看种子应用程序中的代码,<PageSidebar>nav属性被设置为一些React元素(一些JSX(,而不是React组件(返回一些JSX的函数(。

我想您应该使用nav={<Sidenav />},而不是使用nav={Sidenav},以使您的代码与示例相匹配。

相关内容

  • 没有找到相关文章

最新更新