Question

我正在Semantic-Ui-React中使用Next.js app中的<MenuItem/>组件。并得到了一个我无法弄清楚起源是什么的错误。

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的上述Menu项一起使用。预先感谢！

Answer 1

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

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

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

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

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

警告：prop类型失败：提供给MenuItem的prop子元素无效，应为ReactNode

1 个答案: