Reactjs 警告：失败的道具类型：为“MenuItem”提供的道具“children”无效，应为ReactNode

我正在我的中使用来自的

组件。 得到了这个错误，我无法找出它的起源

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

为真，则会呈现与登录相关的菜单项，如果

isLoggedIn

为假，则不相关的项会消失

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>
  );
 }

render（）{
const{children，data，isLoggedIn}=this.props
const{sidebarOpened}=此.state
返回(
{伊斯洛格丁？
数据过滤器（功能（导航）{
如果（nav.name==“登录！”）nav.name=“注销！”
返回（导航名称！=“寄存器”）
})
.map（导航=>{
返回(
)
})
:
数据过滤器（功能（导航）{
如果（nav.name==“注销！”）nav.name=“登录！”
返回（nav.name！=“Profile”）&&（nav.name！=“Dashboard”）
})
.map（导航=>{
返回(
)
})}
{伊斯洛格丁
？注销！
：登录！
}
{伊斯洛格丁| |
登记
}
{儿童}
);
}

---

另外一个重要的注意事项是，我必须切换到，因为Next.js中的组件无法使用前面提到的语义反应UI中的菜单项。提前谢谢

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

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

{isLoggedIn | |

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

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

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

{isLoggedIn？

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

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

{isLoggedIn | |

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

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

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

{isLoggedIn？