警告：失败的道具类型：无效的道具`children'提供给`MenuItem`，期望是ReactNode

Question

我正在使用<MenuItem/>中的Semantic-Ui-React中的Next.js app组件。并收到此错误，我无法弄清是什么原因。

Warning: Failed prop type: Invalid prop `children` supplied to `MenuItem`, expected a ReactNode.
    in MenuItem (created by MobileContainer)
    in MobileContainer (created by LinkNavWithLayout)
    in LinkNavWithLayout (created by Context.Consumer)
    in withRouter(LinkNavWithLayout) (created by Connect(withRouter(LinkNavWithLayout)))
    in Connect(withRouter(LinkNavWithLayout)) (created by Context.Consumer)
    in Route (created by App)
    in Switch (created by App)
    in App (created by MyApp)
    in Container (created by MyApp)
    in PersistGate (created by MyApp)
    in Provider (created by MyApp)
    in MyApp (created by AppWithReactRouter)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppWithReactRouter)
    in AppWithReactRouter (created by AppWithRedux)
    in AppWithRedux
    in Suspense (created by AppContainer)
    in Container (created by AppContainer)
    in AppContainer

以下是我正在渲染的内容，

本质上，如果isLoggedIn为true，它将呈现与登录相关的菜单项，而如果isLoggedIn为false，则不相关的菜单将消失。

render() {
  const { children, data, isLoggedIn } = this.props
  const { sidebarOpened } = 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}
    >
     {isLoggedIn ?
      data.filter(function (nav) {
      if (nav.name === "Login!") nav.name = "Logout!"
       return (nav.name !== "Register")
      })
       .map(nav => {
        return (
         <Menu.Item
          exact
          key={nav.name}
          as={NavLink}
          to={nav.path}
          name={nav.name}
          onClick={this.handleSidebarHide}
         >
         </Menu.Item>
        )
       })
      :
      data.filter(function (nav) {
       if (nav.name === "Logout!") nav.name = "Login!"

       return (nav.name != "Profile") && (nav.name != "Dashboard")
      })
       .map(nav => {
        return (
         <Menu.Item
          exact
          key={nav.name}
          as={NavLink}
          to={nav.path}
          name={nav.name}
          onClick={this.handleSidebarHide}
         >
         </Menu.Item>
        )
       })}

    </Sidebar>

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

         <Button inverted>
          {isLoggedIn
           ? <Link to="/" onClick={this.logOutuser}>Log out!</Link>
           : <Link to="/login">Log in!</Link>
          }
          </Button>
         {isLoggedIn || <Button inverted style={{ marginLeft: '0.5em' }}>
          <Link to="/register"><span>Register!</span></Link>
         </Button>}
        </Menu.Item>
       </Menu>
      </Container>
     </Segment>

     {children}
    </Sidebar.Pusher>
   </Responsive>
  );
 }

[还有一个重要的注意事项是，我必须切换到React-Router，因为Next.js中的Link组件无法与Semantic-React-UI中的上述菜单项一起使用。预先感谢！

Answer 1

问题似乎是由于以下代码而引起的

{isLoggedIn || <Button inverted style={{ marginLeft: '0.5em' }}>

在这种情况下，如果isLoggedIn为true，则上面的代码将返回false，这似乎是Menu.Item的无效子项。

相反，您可以修改上面的代码以使其具有三元条件，并为虚假条件返回null

{isLoggedIn? <Button inverted style={{ marginLeft: '0.5em' }}: null>