NextJS - 将状态作为自定义应用程序中的道具传递给 children

Question

我有这个 ./pages/_app.js from the official docs:

import App, { Container } from 'next/app'

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

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

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

export default MyApp

我想将状态从 MyApp 传递到它呈现的每个页面，但不知道如何做。我试过这个：

const childProps = {
  ...
}

<Container>
  <Component {...childProps} />
</Container>

出现错误：

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

Answer 1

罪魁祸首是

<Link>
  <Icon />
  text
</Link>

在呈现的页面中（不是 _app.js）。 Link 有两个 children（react-router Link 的残余）而不是一个。

Answer 2

像传递通常的道具一样传递你想要的东西

<Component whatyouwant={propsyouwant} />

例如：这就是我将 MobileDetect props 传递给应用程序中每个组件的方式：

class MyApp extends App {

  static async getInitialProps({ Component, router, ctx }) {

    let pageProps = {}
    const { req } = ctx
    var MobileDetect = require('mobile-detect')
    const md = new MobileDetect(req ? req.headers['user-agent'] : "")
    const phone = md.phone()
    const tablet = md.tablet()

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
    return {  pageProps,  
              phone: phone, 
              tablet: tablet }
  }


  render () {

    const {Component, pageProps, phone, tablet} = this.props
    return (
      <Container>
        <Provider store={reduxStore}> 
            <Nav /> 
            <Component {...pageProps} phone={phone} tablet={tablet} />
            <Footer />
        </Provider>
      </Container>
    )
  }
}

export default withReduxStore(MyApp)

NextJS - 将状态作为自定义应用程序中的道具传递给 children

NextJS - Passing state to children as props in custom app

reactjs

next.js