Javascript 未捕获不变冲突：React.Children.仅应接收单个React元素子元素

我试图将一个函数传递给一个生成

我想我之前被卡住了，因为那个例子似乎有父母和孩子，而我的例子中间有一个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,
}

var比较器；
const genericUserLoggeDinlink=React.memo（{isHomeButton，isLoggedIn，logOutUser，route，AnchortText，mobile，name，selected，handleItemClick}）=>{
比较器=（prevProps，nextProps）=>{
if（prevProps.isHomeButton！==nextProps.setProps.isHomeButton）{
返回true；
}
if（prevProps.isLoggedIn！==nextrops.setProps.isLoggedIn）{
返回true；
}
if（prevProps.mobile！==nextProps.setProps.mobile）{
返回true；
}
如果（prevProps.selected！==nextProps.setProps.selected）{
返回true；
}
返回false；
}
函数currentNav（路由、名称、选定、锚文本、handleItemClick）{
const navItems=['home'，'profile'，'dashboard']；
返回(
{navItems.map（currentNavItem=>(
handleItemClick（CurrentNaviItem）}>
{anchorText}
))}
);
}
如果（iHomeButton）{
返回当前导航（路由、名称、选定、锚文本、handleItemClick）
}
如果（isLoggedIn）{
如果（anchorText==未定义）{
返回
}
}否则{
如果（路由==“/登录”）{
返回
{儿童}
)
}
}
DesktopContainer.propTypes={
子项：PropTypes.node，
}
类MobileContainer扩展组件{
状态={activeItem:'home'}
handleSidebarHide=（）=>this.setState（{sidebarOpened:false}）
handleToggle=（）=>this.setState（{sidebarOpened:true}）
handleItemClick=（activeItem）=>this.setState（{activeItem}）
注销用户=（）=>{
const{logOutUser}=this.props
logOutUser（）
}
render（）{
const{generiheadingcomponent，children，getWidth，isLoggedIn，logOutUser，mobile}=this.props
const{sidebarOpened，activeItem}=this.state
返回(
要消除此错误？
来自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>


{navItems.map（currentNavItem=>(
handleItemClick（CurrentNaviItem）}>
{anchorText}
))}
来自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>


{navItems.map（currentNavItem=>(
handleItemClick（CurrentNaviItem）}>
{anchorText}
))}
如果next.js中出现错误

  <Link href="/"><a> Home </a></Link>

如果next.js中出现错误

  <Link href="/"><a> Home </a></Link>