Функции недопустимы как дочерние элементы React. - Функциональные компоненты в реакции - PullRequest
Новая
       25

Функции недопустимы как дочерние элементы React. - Функциональные компоненты в реакции

0 голосов
/ 13 апреля 2020

В настоящее время я пытаюсь интегрировать Patternfly React в мой проект. Это ссылка, которую я использую для справки, которая работает нормально. Но нужно иметь отдельный компонент для заголовка, нижнего колонтитула, topnav и sidenav. Таким образом, при разделении кода на компоненты возникает проблема:

Недопустимая поддержка nav, указанная для 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 в атрибуте nav как const Sidebar = <PageSidebar nav={SideNav} theme="dark" />;.

Что именно не так с этим?

1 Ответ

1 голос
/ 13 апреля 2020

Глядя на код в семенном приложении , свойство nav <PageSidebar> устанавливается для некоторых элементов React (некоторые JSX), а не для компонента React (функция, возвращающая некоторые JSX). ).

Полагаю, что вместо nav={Sidenav} вы должны использовать nav={<Sidenav />}, чтобы ваш код соответствовал примеру.

...