我目前正在尝试将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}
,以使您的代码与示例相匹配。