Используйте getInitialProps в компоненте Layout в nextjs - PullRequest
Новая
       37

Используйте getInitialProps в компоненте Layout в nextjs

1 голос
/ 11 апреля 2019

Таким образом, этот компонент макета находится в папке layouts, в которой getInitialProps недоступен. Я пытаюсь использовать getInitialProps в моем компоненте макета. Я уже прочитал сообщение о том, что мне нужно поместить компонент макета в файл _app.js, и я не хочу, чтобы все мои страницы имели доступ к этому макету. 

import React, {Component, Fragment} from 'react'
import PropTypes from 'prop-types'

class WithUserLayout extends Component {
  static async getInitialProps() {
    console.log('layout')
  }
  render() {
    const {children} = this.props
    return (
      <Fragment>
        {children}
      </Fragment>
    )
  }
}

WithUserLayout.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ])
}
export default WithUserLayout

Есть ли способ сделать это?

Спасибо!

1 Ответ

0 голосов
/ 11 апреля 2019

На самом деле мой плохой в комментариях. Да, HOCs был бы прекрасным способом приблизиться к этому. getInitialProps доступен только для компонентов страницы, при условии, что вне этого компонента нет HOC. Теперь, когда у вас есть HOC, getInitialProps будет доступен для него, но теперь это не ваш фактический компонент страницы! Следовательно, вы должны вручную вызвать этот метод из этого HOC, и это будет выглядеть так: 

import React, {Component, Fragment} from 'react'
import PropTypes from 'prop-types'

const withUserLayout = (child: Child) => {
  return class WithUserLayout extends Component {
    static async getInitialProps(ctx) {
      let pageProps = {};
      try {
        if (Child.getInitialProps) {
          pageProps = await Child.getInitialProps(ctx);
        } 
      } catch (err) {
       throw new Error(`Cannot invoke getInitalProps of ${Child.displayName}`, err.stack);
      }

      return pageProps;
    }

    render() {
      // Rendering
    }
  }
}

Для дальнейшего ознакомления, пожалуйста, взгляните на этот фрагмент кода

...