Javascript next.js将道具从HOC传递到子组件getInitialProps

我想为我的应用程序中的页面创建一个HOC，当页面未在服务器上呈现时，它提供一些保存在本地存储中的信息

我只能从

componentDidMount

实际设置数据，因为我需要访问localStorage（显然在节点环境中不可用）

如果这不是一个可行的模式；对于我来说，有没有可靠的方法可以与localStorage共享/重用我这里的目标逻辑

理论上，我可以在每个页面组件中这样做：

static async getInitialProps(props) {

    let language;
    if (props.req) {
        /* SSR */
        language = req.session.language;
    } else {
        /* non-SSR */
        language = localStorage.getItem('language') // works
    }
    ...

---

但这似乎是不必要的冗余。

能够通过将值作为参数提供给子函数的

getInitialProps

来传递值：

  static async getInitialProps (ctx) {
    let language;
    if (ctx.req) {
        language = ctx.req.session.language;
    } else {
        language = localStorage.getItem('language');
    }
    let props = {}
    if (Page.getInitialProps) {
        const pageProps = await Page.getInitialProps(ctx, language); // <--- this
        props = { ...pageProps, language }
    }
    return props;
  }

---

非常有用。谢谢。@Danial Thompson:Danial，我在我的app.js中使用了getInitialProps，并将一些数据传递给了它的孩子。就像您提出的方法一样，它通过使用getInitialProps在子组件中工作。虽然继续使用next.js>9.3，但我尝试使用getServerSideProps，但没有成功。你对此有什么想法吗？需要指出的是，getServerSideProps还没有引入到app.js中，我不得不坚持使用getInitialProps。但是在子组件中，我可以使用getServerSideProps，我正在寻找一个解决方案来获取数据表单应用程序。有什么想法吗？谢谢！我做了一个小小的修改：

constpageprops=await Page.getInitialProps（{…ctx，language}）

这样添加的道具就成为第一个参数的一部分，您可以执行

getInitialProps（{query，language}）

。

static async getInitialProps(props) {

    let language;
    if (props.req) {
        /* SSR */
        language = req.session.language;
    } else {
        /* non-SSR */
        language = localStorage.getItem('language') // works
    }
    ...

  static async getInitialProps (ctx) {
    let language;
    if (ctx.req) {
        language = ctx.req.session.language;
    } else {
        language = localStorage.getItem('language');
    }
    let props = {}
    if (Page.getInitialProps) {
        const pageProps = await Page.getInitialProps(ctx, language); // <--- this
        props = { ...pageProps, language }
    }
    return props;
  }

static async getInitialProps({ query }, language) {

    console.log("is language passed through: ", language); // "en"
    const jobStatus = query.jobStatus;

    return { jobStatus }
}