Обязательное пользовательское приложение и документ next.js

React.js

предисловие

В этой статье будут представлены пользовательские компоненты приложения, компоненты документа в Next.js и когда вам нужно настроить эти компоненты, что может быть чем-то, что мы делаем в каждом проекте, так что давайте освоим это вместе.

Советы: Согласно обычному утверждению, автор также является игроком начального уровня, и глубина статьи не может достигать уровня статьи большого уровня.Я только надеюсь, что она может быть полезна всем друзьям начального уровня.

пользовательское приложение

Прежде всего, давайте поговорим о том, зачем нам нужно настраивать приложение.Приложение здесь на самом деле является корневым компонентом, когда мы обычно пишем React. 1) Переписывая_app.jsфайл, мы можем провести рефакторинг компонента приложения и добавить некоторый неизменный контент в проекте в компонент приложения, например макет страницы;

2) Сохраняйте общедоступное состояние в приложении.Общедоступным состоянием здесь также может быть какой-то глобальный CSS, например те, что были добавлены в нашей предыдущей статье о построении среды.antd.css;

3) и передавать пользовательские данные на страницу,

4) ИспользованиеcomponentDidCatchнастраиваемая обработка ошибок;

5) Внедрить дополнительные данные на страницу (например, запросы GraphQL)

существуетСреду next.js+koa2+antd легко построитьОдну статью мы написали_app.jsЧтобы представить ANTD CSS, здесь у нас есть в дополнение к введениюantd.cssБольше ничего не делается, после импорта antd.css он вступит в силу глобально.

import App from 'next/app'
import 'antd/dist/antd.css'
export default App

Давайте внесем некоторые изменения в него сейчас

import App, { Container } from 'next/app'
import 'antd/dist/antd.css'

// 新增了这一段
class MyApp extends App {
    render() {
        const { Component } = this.props; 
        console.log(Component);

        return (
            <Container>
                <Component />
            </Container>
        )
    }
}

export default MyApp

Сравните этот фрагмент кода, здесь изnext/appВведенContainerкомпонент, и переписал один в серединеMyAppКласс, наследуемый от App, возвращает его в конце. существуетMyApp, переписаноrenderметод рендеринга компонента, полученного из реквизитаComponentкомпонент обращается к каждомуpagesjs, эти файлы возвращают компоненты. Подумайте об этом, при написании React другие компоненты должны отображаться в самом внешнем компоненте App.То же самое верно и здесь. Стоит отметить, что самый внешний слой должен использоваться, когда компонент MyApp здесь возвращается к компоненту.ComtainerКомпоненты упакованы. Мы можем легко распечатать компонент, чтобы увидеть, соответствует ли он тому, что мы сказали.

переписатьgetInitialProps

Но сейчас это не завершено, мы даже не реализовали первоначальную функцию приложения: в текущем компоненте мы не можем получить другие страницы.getInitialProps()метод инициализировал данные, если они верныgetInitialProps()Если вы не понимаете, пожалуйста, прочитайтеОчень простая спецификация сбора данных next.jsилиофициальная документацияЗдесь вы можете увидеть пример

здесь, вgetInitialProps()Данные, определенные в, не отображаются

class MyApp extends App {
    static getInitialProps = async ({Component}) => {
        let pageProps;
        if(Component.getInitialProps) {
            pageProps = await Component.getInitialProps()
        }
        return {
            pageProps
        }
    }

    render() {
        const { Component, pageProps } = this.props;
        console.log(Component);

        return (
            <Container>
                <Component {...pageProps} />
            </Container>
        )
    }
}

Вот новый, добавленный в MyAppgetInitialPropsметод, обратите внимание, что он静态方法, так как другие страницы могут установитьgetInitialPropsОн может быть не задан, поэтому тут нужно судить, а этот метод является асинхронным методом, обратите внимание на его добавление при выполненииawaitи во внешнем методе добавитьasync. Таким образом, другие страницы могут бытьgetInitialPropsУстановленные свойства импортируются и передаются вComponentЕго можно отобразить, посмотрим эффект

Здесь вы можете нормально печатать

Пример управления глобальными данными

state = {
    counter: 20
}

Например, если вы определяете счетчик в MyApp, вы можете передать его всем компонентам.пример макетаСоздать layout.jsx в каталоге компонентов

import Link from 'next/link';
import { Button } from 'antd'

export default ({ children }) => {
    return (
        <>
            <div className="header">
                <Link href="/a?id=1"><Button>跳转A</Button></Link>
                <Link href="/test/b"><Button>跳转B</Button></Link>
            </div>
            <div className="body">
                {children}
            </div>
        </>
    )
}

Затем ссылка в _app.js

return (
    <Container>
        <Layout>
            <Component {...pageProps} />
        </Layout>
    </Container>
)

Таким образом, каждая страница будет отображать макет

Пользовательский документ

Он будет вызываться только во время рендеринга на стороне сервера. В основном он используется для изменения содержимого документа, отображаемого сервером. Обычно рендеринг на стороне сервера использует некоторыеcss-in-jsбиблиотека (styled-jsxNEXT.JS (самостоятельная библиотека CSS-IN-JS) Он определяет _Document.js

import Document, {Html, Head, Main, NextScript} from 'next/document'

class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}
export default MyDocument

существуетnext/documentОн предоставляет не только компонент Document, но и некоторые компоненты, соответствующие тегам HTML, не забудьте написать их при переписывании.

Попробуйте добавить что-нибудь в голову

<Head>
    <title>My Next.js</title>
    <style>{`* { color: red}`}</style>
</Head>

установить getInitialProps

Опять же, документ выполняется только тогда, когда сервер его отображает.

При переписывании документа мы также можем переписатьgetInitialPropsэтот метод getInitialProps поступает из компонента Document.

static getInitialProps = async (ctx) => {
    const props = await Document.getInitialProps(ctx)

    return {
        ...props
    }
}

Метод getInitialProps здесь тоже статический, и еще добавлен асинхронный, т.к. в нем используется await, и обратите внимание, что есть параметрctx, мы не можем его переписать, но если мы хотим его переписать, то нам нужно переписать его в соответствии с этим форматом, а затем добавить в него то, что мы хотим.

конец

Содержание этой статьи относительно простое, но очень важное, часто используется при разработке проектов с использованием next.js, поэтому лучше его освоить. Интеграция сзадиcss in jsСтатья о стиле может более подробно описать, что мы можем сделать в _docuemnt.js, надеясь помочь друзьям начального уровня.

Категории