Nextjs - Reactjs - Invariant Violation: React.Children.only 期望接收单个 React 元素子元素答案

【问题标题】：Nextjs - Reactjs - Invariant Violation: React.Children.only expected to receive a single React element childNextjs - Reactjs - Invariant Violation: React.Children.only 期望接收单个 React 元素子元素
【发布时间】：2018-08-09 00:50:44
【问题描述】：

我正在使用 Nextjs 和 Reactjs。我已经为我的应用程序 UI 设置了 Layout.js 文件。

我想知道为什么我的控制台返回我：

Invariant Violation：React.Children.only 预计会收到一个反应元素子。

这是我的 layout.js：

export default ({ children, title = 'This is the default title' }) => (
    <div>
        <Head>
        <title>{ title }</title>
        <meta charSet='utf-8' />
        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
        </Head>
        <div className={style.layout}>
            <div>
                <div className={style.header}>
                    <div className= {style.headbar}> 
                        <div className={style.headerLeft}>
                            <Logo className={style.logo}/> 
                        </div>
                        <div className={style.headerRight}>
                            <MenuContainer className={style.menu}/> 
                        </div>
                    </div>
                    <div className={style.chatbox}> 
                        <ChatContainer/>
                    </div>
                </div> 

                { children }

                <div className={style.footer}> 
                    <Link to="/quote" className={style.quote}> 
                        Click here
                    </Link>
                    <SocialMedia/>
                    <Subscription/>
                </div>
            </div>
        </div>
    </div>
)

我的 WrappedComponent.js：

const Index = () => (
      <Provider store={store}> 
            <Layout> 
                  <Home/>
            </Layout>
      </Provider>
)

我不知道出了什么问题，在我看来一切都很好，如果有人有任何提示，那就太好了。

谢谢。

【问题讨论】：

写<Link to="/quote/" className={style.quote}>Click here</Link>有用吗？ IE。 Link 子组件内没有任何空格。
谢谢 Tholle，看来还是不行：/
是的，这是特定于 React 的代码，但您应该能够在 您自己的代码中看到它的来源。
Logo、MenuContainer、ChatContainer、SocialMedia、Subscription 组件怎么样。他们返回单个元素吗？在这种情况下，React 的错误并不是直截了当的，因此您必须检查所有这些错误。尝试一个一个删除，看看问题是否仍然存在。您可以找到导致它的原因。
所以应该不是他们的Layout本身，而是里面的组件。您应该删除所有内容并再次添加，直到错误再次出现。通过这样做，您可以找到哪个组件导致错误。

标签： javascript reactjs next.js

【解决方案1】：

问题是我的数据结构对应于另一个框架。所以有一些小细节让 NextJS 迷恋——比如我的 React Links 中的“props”调用，这种东西。所以如果有人有同样的问题，请仔细检查你的框架数据结构的配置

【讨论】：