Question

我是React和Next的新手，我想做的是将我的主要内容包装在一个可以在页面上共享的布局中。

在我的components文件夹中，创建了一个Layout.js文件：

import Head from 'next/head';

import Header from './main/Header';
import Footer from './main/Footer';

import '../styles/main.scss';

const Layout = (props) => (
  <div>
    <Head>
      <title>Testing</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      <link rel="stylesheet" href="/_next/static/style.css" />
    </Head>
    <div className="app">
      <Header />
      {props.children}
      <Footer />
    </div>
  </div>
);

export default Layout;

我正在页面文件夹中的index.js文件中使用它：

import React, { Component } from 'react';

import Layout from '../components/Layout';

export default class extends Component {
  render() {
    return (
      <Layout>
        <h1>Hello</h1>
      </Layout>
    );
  }
};

结果是此错误：

React.Children。只希望接收一个React元素的孩子。

我敢打赌，我在Layout.js文件中做错了什么，但我不明白如何正确解决。希望您能提供帮助。谢谢

Answer 1

为什么要添加

    <Head>
      <title>Testing</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      <link rel="stylesheet" href="/_next/static/style.css" />
    </Head>`

在您的Layout组件中？我认为head标签应该在pages/_document.js中。看到我的repository对我来说很好

Answer 2

如Next.js文档中所述

注意：浏览器不会初始化外部的React组件。

因此您必须使用默认的App组件。
要覆盖，请创建./pages/_app.js并将其放入其中。您必须调整模块的导入。

import React from 'react'
import App, {Container} from 'next/app'
import Layout from '../components/Layout
import Header from '../components/main/Header'
import Footer from '../components/main/Footer'

export default class MyApp extends App {
  render () {
    const {Component, pageProps} = this.props
    return (
      <Container>
        <div className="app">
          <Header />
          <Layout>
            <Component {...pageProps} />
          </Layout>
        <Footer />
        </Container>
      </div>
    )
  }
}

无法使用nextjs正确创建主布局

2 个答案: