Question

Я пытаюсь передать функцию ребенку, который генерирует меню

Думаю, я застрял раньше, так как в этом примере, похоже, есть родитель и ребенок, а у моего -HOC посередине:

var comparator;
const GenericIsUserLoggedInLink = React.memo(({ isHomeButton, isLoggedIn, logOutUser, route, anchorText, mobile, name, selected, handleItemClick }) => {

 comparator = (prevProps, nextProps) => {

  if (prevProps.isHomeButton !== nextProps.setProps.isHomeButton) {
   return true;
  }
  if (prevProps.isLoggedIn !== nextProps.setProps.isLoggedIn) {
   return true;
  }
  if (prevProps.mobile !== nextProps.setProps.mobile) {
   return true;
  }
  if (prevProps.selected !== nextProps.setProps.selected) {
   return true;
  }
  return false;
 }

 function currentNav(route, name, selected, anchorText, handleItemClick) {
  const navItems = ['home', 'profile', 'dashboard'];
  return (
  <>
    <Link href={route}>
     {navItems.map(currentNavItem => (
      <Menu.Item
       key={currentNavItem}
       name={name}
       active={currentNavItem === selected ? true : false}
       onClick={() => handleItemClick(currentNavItem)}>
       {anchorText}
      </Menu.Item>
     ))}
    </Link>
  </>
  );
 }

 if (isHomeButton) {
  return currentNav(route, name, selected, anchorText, handleItemClick)
 }
 if (isLoggedIn) {
  if (anchorText === undefined) {
   return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
  }
  else if (mobile) {
   return currentNav(route, name, selected, anchorText, handleItemClick)
  }
  else if (!(mobile)) {
   return currentNav(route, name, selected, anchorText, handleItemClick)
  }

  else if (anchorText) {
   return <Link href={route}><a>{anchorText}</a></Link>
  }
 } else {
  if (route === "/login") {
   return <Link href="/login"><a>Log in!</a></Link>
  }
  return null
 }
}, comparator);



class DesktopContainer extends Component {
 state = {activeItem: 'home'}

 hideFixedMenu = () => this.setState({ fixed: false })
 showFixedMenu = () => this.setState({ fixed: true })
 handleItemClick = (activeItem) => this.setState({ activeItem })


 logOutUser = () => {
  const { logOutUser } = this.props
  logOutUser()
 }

 render() {
  const { GenericHeadingComponent, children, getWidth, isLoggedIn, logOutUser } = this.props


  const { fixed, activeItem } = this.state

  return (
   <Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>
    <Visibility
     once={false}
     onBottomPassed={this.showFixedMenu}
     onBottomPassedReverse={this.hideFixedMenu}
    >
     <Segment
      inverted
      textAlign='center'
      style={{ minHeight: 700, padding: '1em 0em' }}
      vertical
     >
      <Menu
       fixed={fixed ? 'top' : null}
       inverted={!fixed}
       pointing={!fixed}
       secondary={!fixed}
       size='large'
      >
       <Container>

        <GenericIsUserLoggedInLink
         isHomeButton={true}
         route="/"
         name='home'
         selected={activeItem}
         handleItemClick={this.handleItemClick}
         mobile={false}
        />

        <GenericIsUserLoggedInLink
         isLoggedIn={isLoggedIn}
         route="/profile"
         anchorText="Profile"
         name='profile'
         selected={activeItem}
         handleItemClick={this.handleItemClick}
         mobile={false}
        />

        <GenericIsUserLoggedInLink
         isLoggedIn={isLoggedIn}
         route="/dashboard"
         anchorText="Dashboard"
         name='dashboard'
         selected={activeItem}
         handleItemClick={this.handleItemClick}
         mobile={false}
        />


        <Menu.Item position='right'>
         <Button inverted={!fixed}>
          <GenericIsUserLoggedInLink
           route="/login"
           isLoggedIn={isLoggedIn}
           logOutUser={logOutUser}
           />
         </Button>
         <Button inverted={!fixed} primary={fixed} style={{ marginLeft: '0.5em' }}>
          <Link href="/register">
           <a>Register</a>
          </Link>
         </Button>
        </Menu.Item>
       </Container>
      </Menu>
      <GenericHeadingComponent />
     </Segment>
    </Visibility>

    {children}
   </Responsive>
  )
 }
}

DesktopContainer.propTypes = {
 children: PropTypes.node,
}

class MobileContainer extends Component {
 state = { activeItem: 'home' }

 handleSidebarHide = () => this.setState({ sidebarOpened: false })

 handleToggle = () => this.setState({ sidebarOpened: true })
 handleItemClick = (activeItem) => this.setState({ activeItem })

 logOutUser = () => {
  const { logOutUser } = this.props
  logOutUser()
 }

 render() {
  const { GenericHeadingComponent, children, getWidth, isLoggedIn, logOutUser, mobile } = this.props
  const { sidebarOpened, activeItem } = this.state

  return (
   <Responsive
    as={Sidebar.Pushable}
    getWidth={getWidth}
    maxWidth={Responsive.onlyMobile.maxWidth}
   >
    <Sidebar
     as={Menu}
     animation='push'
     inverted
     onHide={this.handleSidebarHide}
     vertical
     visible={sidebarOpened}
    >

     <GenericIsUserLoggedInLink
      isHomeButton={true}
      route="/"
      name='home'
      anchorText="Home"
      selected={activeItem}
      handleItemClick={this.handleItemClick}
      mobile={true}
     />

     <GenericIsUserLoggedInLink
      isLoggedIn={isLoggedIn}
      route="/profile"
      anchorText="Profile"
      name='profile'
      selected={activeItem}
      handleItemClick={this.handleItemClick}
      mobile={true}
     />

     <GenericIsUserLoggedInLink
      isLoggedIn={isLoggedIn}
      route="/dashboard"
      anchorText="Dashboard"
      name='dashboard'
      selected={activeItem}
      handleItemClick={this.handleItemClick}
      mobile={true}
     />

     <Menu.Item>
      <GenericIsUserLoggedInLink
       route="/login"
       isLoggedIn={isLoggedIn}
       logOutUser={logOutUser}
      />
     </Menu.Item>
     <Menu.Item >
      <Link href="/register">
       <a>Register</a>
      </Link>
     </Menu.Item>
    </Sidebar>

    <Sidebar.Pusher dimmed={sidebarOpened}>
     <Segment
      inverted
      textAlign='center'
      style={{ minHeight: 350, padding: '1em 0em' }}
      vertical
     >
      <Container>
       <Menu inverted pointing secondary size='large'>
        <Menu.Item onClick={this.handleToggle}>
         <Icon name='sidebar' />
        </Menu.Item>
       </Menu>
      </Container>
      <GenericHeadingComponent mobile={mobile} />
     </Segment>
     {children}
    </Sidebar.Pusher>
   </Responsive>
  )
 }
}

MobileContainer.propTypes = {
 children: PropTypes.node,
}

Эта ошибка вызывается в моем <DesktopContainer/> и <MobileContainer/> компоненте.

Этоошибки:

index.js:1 The above error occurred in the <Link> component:
    in Link
    in Unknown (created by MobileContainer)
    in div (created by Menu)
    in Menu (created by Sidebar)
    in RefFindNode (created by Ref)
    in Ref (created by Sidebar)
    in Sidebar (created by MobileContainer)
    in div (created by SidebarPushable)
    in SidebarPushable (created by Responsive)
    in Responsive (created by MobileContainer)
    in MobileContainer (created by LayoutComponent)
    in LayoutComponent (created by Connect(LayoutComponent))
    in Connect(LayoutComponent) (created by HomepageLayout)
    in HomepageLayout (created by Connect(HomepageLayout))
    in Connect(HomepageLayout) (created by Home)
    in Home (created by Connect(Home))
    in Connect(Home) (created by MyApp)
    in PersistGate (created by MyApp)
    in Provider (created by MyApp)
    in MyApp (created by AppWithRedux)
    in AppWithRedux
    in Suspense (created by AppContainer)
    in Container (created by AppContainer)
    in AppContainer

VM451 main.js:12445 The above error occurred in the <Link> component:
    in Link
    in Unknown (created by DesktopContainer)
    in div (created by Container)
    in Container (created by DesktopContainer)
    in div (created by Menu)
    in Menu (created by DesktopContainer)
    in div (created by Segment)
    in Segment (created by DesktopContainer)
    in div (created by Visibility)
    in RefFindNode (created by Ref)
    in Ref (created by Visibility)
    in Visibility (created by DesktopContainer)
    in div (created by Responsive)
    in Responsive (created by DesktopContainer)
    in DesktopContainer (created by LayoutComponent)
    in LayoutComponent (created by Connect(LayoutComponent))
    in Connect(LayoutComponent) (created by HomepageLayout)
    in HomepageLayout (created by Connect(HomepageLayout))
    in Connect(HomepageLayout) (created by Home)
    in Home (created by Connect(Home))
    in Connect(Home) (created by MyApp)
    in PersistGate (created by MyApp)
    in Provider (created by MyApp)
    in MyApp (created by AppWithRedux)
    in AppWithRedux
    in Suspense (created by AppContainer)
    in Container (created by AppContainer)
    in AppContainer

VM453 dll_397dc449097af0b4e992.js:26942 Uncaught Invariant Violation: React.Children.only expected to receive a single React element child.
    at http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:26942:26
    at Object.onlyChild [as only] (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:26945:5)
    at Link.render (http://localhost:8016/_next/static/development/pages/index.js?ts=1572206599026:25504:35)
    at finishClassComponent (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:17380:31)
    at updateClassComponent (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:17335:24)
    at beginWork$1 (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:18846:16)
    at HTMLUnknownElement.callCallback (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:688:14)
    at Object.invokeGuardedCallbackDev (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:738:16)
    at invokeGuardedCallback (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:795:31)
    at beginWork$$1 (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:23558:7)
    at performUnitOfWork (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:22549:12)
    at workLoopSync (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:22526:22)
    at renderRoot (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:22219:11)
    at scheduleUpdateOnFiber (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:21760:22)
    at scheduleRootUpdate (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:24660:3)
    at updateContainerAtExpirationTime (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:24688:10)
    at updateContainer (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:24777:10)
    at http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:25304:7
    at unbatchedUpdates (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:22028:12)
    at legacyRenderSubtreeIntoContainer (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:25303:5)
    at Object.hydrate (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:25370:12)
    at renderReactElement (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9362:26)
    at _callee4$ (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9494:13)
    at tryCatch (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:698:40)
    at Generator.invoke [as _invoke] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:924:22)
    at Generator.prototype.<computed> [as next] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:750:21)
    at asyncGeneratorStep (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:226:24)
    at _next (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:248:9)
    at http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:255:7
    at new Promise (<anonymous>)
    at new F (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:2352:28)
    at http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:244:12
    at _doRender (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9508:20)
    at doRender (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9437:20)
    at _callee2$ (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9247:20)
    at tryCatch (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:698:40)
    at Generator.invoke [as _invoke] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:924:22)
    at Generator.prototype.<computed> [as next] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:750:21)
    at asyncGeneratorStep (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:226:24)
    at _next (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:248:9)
    at http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:255:7
    at new Promise (<anonymous>)
    at new F (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:2352:28)
    at http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:244:12
    at _render (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9268:18)
    at render (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9219:18)
    at _callee$ (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9200:13)
    at tryCatch (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:698:40)
    at Generator.invoke [as _invoke] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:924:22)
    at Generator.prototype.<computed> [as next] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:750:21)

Может кто-нибудь определить, где я могу обернуть <></>, чтобы устранить эту ошибку?

El Aoutar Hamza · Answer 1 · 27 октября 2019

Link из Next.js ожидает один дочерних элементов, и будет выдано сообщение об ошибке, если указано несколько дочерних элементов.

Вы можете заключить несколько дочерних элементов в тег a:

<Link href={route}>
  <a>
    {navItems.map(currentNavItem => (
      <Menu.Item
        key={currentNavItem}
        name={name}
        active={currentNavItem === selected ? true : false}
        onClick={() => handleItemClick(currentNavItem)}>
        {anchorText}
      </Menu.Item>
    ))}
 </a>
</Link>

Неизвестное инвариантное нарушение: ожидается, что React.Children. Получит единственный дочерний элемент React

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Неизвестное инвариантное нарушение: ожидается, что React.Children. Получит единственный дочерний элемент React

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы