React.Children.only 预计会收到一个 React 元素子元素。插入组件时出错

Question

我收到以下错误：

React.Children.only expected to receive a single React element child.

我已经查到是哪个组件导致的，但我不确定错误出在哪里，因为组件中的所有项目都被包裹在一个 div 中。这是父组件：

    return(
        <div className="Layout">
        <Meta/> 
        <Navbar/> <--- Component causing me trouble.
        {props.children}
        </div>

    )

这是组件中的代码。

const navButtons = [
    {
      label: "Home",
      path: "/dashboard"
    },
    {
      label: "Products",
      path: "/products"
    },
    {
      label: "Projects",
      path: "/projects"
    },
    {
      label: "Contacts",
      path: "/contacts"
    }

  ];

  export function NavBar(props){
      return(<div><div className="NavBar">
    {navButtons.map(button => (
      <NavButton
        key={button.path}
        path={button.path}
        label={button.label}
        icon="temp"
      />
    ))}
  </div>
  <style jsx>
    {`
    .NavBar {
      display: flex;
      justify-content: space-around;
      align-items: center;

      height: 60px;
      width: 100%;
      padding: 5px 0;

      background: #d5e4f7;

      font-family: Furua Std;
      font-size: 22px;
      color: #323232;

    }

    `}
  </style></div>)

  };

  export default NavBar;

使用堆栈跟踪更新

{ Invariant Violation: React.Children.only expected to receive a single React element child.
    at C:\Users\xxx\Documents\GitHub\xxx\node_modules\react\cjs\react.development.js:1327:26
    at Object.onlyChild [as only] (C:\Users\xxx\Documents\GitHub\xxx\node_modules\react\cjs\react.development.js:1330:5)
    at Link.render (C:\Users\xxx\Documents\GitHub\xxx\.next\server\static\development\pages\dashboard.js:682:35)
    at processChild (C:\Users\xxx\Documents\GitHub\xxx\node_modules\react-dom\cjs\react-dom-server.node.development.js:3171:18)
    at resolve (C:\Users\xxx\Documents\GitHub\xxx\node_modules\react-dom\cjs\react-dom-server.node.development.js:3013:5)
    at ReactDOMServerRenderer.render (C:\Users\xxx\Documents\GitHub\xxx\node_modules\react-dom\cjs\react-dom-server.node.development.js:3436:22)
    at ReactDOMServerRenderer.read (C:\Users\xxx\Documents\GitHub\xxx\node_modules\react-dom\cjs\react-dom-server.node.development.js:3395:29)
    at renderToString (C:\Users\xxx\Documents\GitHub\xxx\node_modules\react-dom\cjs\react-dom-server.node.development.js:3954:27)
    at render (C:\Users\xxx\Documents\GitHub\xxx\node_modules\next-server\dist\server\render.js:79:16)
    at renderPage (C:\Users\xxx\Documents\GitHub\xxx\node_modules\next-server\dist\server\render.js:255:20)
    at C:\Users\xxx\Documents\GitHub\xxx\.next\server\static\development\pages\_document.js:437:17
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\xxx\Documents\GitHub\xxx\.next\server\static\development\pages\_document.js:206:24)
    at _next (C:\Users\xxx\Documents\GitHub\xxx\.next\server\static\development\pages\_document.js:228:9)
    at C:\Users\xxx\Documents\GitHub\xxx\.next\server\static\development\pages\_document.js:235:7
    at new Promise (<anonymous>) name: 'Invariant Violation' }

使用按钮代码更新

interface Props{
    key: string,
    icon: string,
    label: string,
    path: string,

}

const NavButton = (props:Props) => (

    <Link href={props.path}>

      <div className="NavButton">

        <span className="Label">{props.label}</span>
      </div>
      <style jsx>
        {`
        .NavButton {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;

          height: 100%;

          cursor: pointer;
        }

          .Label {
            font-size: 12px;
            text-transform: capitalize;
          }

        `}
      </style>
    </Link>


  );

  export default NavButton;

Answer 1

根据 this，一个 Link 组件不能有多个 children。

但是您可以在 Link 中放置一个 a 标记，并将多个 children 放置在 a 中。

<Link href="#">
  <a>
    <div>ch1</div>
    <div>ch2</div>
    <div>ch3</div>
  </a>
</Link>

React.Children.only 预计会收到一个 React 元素子元素。插入组件时出错

React.Children.only expected to receive a single React element child. Error when inserting component

reactjs

next.js