Question

我有一个简单的nextjs布局：

export default class AppLayout extends React.Component {
    render() {
        return (
            <>
                <Header />
                {this.props.children}
                <Footer />
            </>
        )
    }
}

我一直在尝试用redux商店包装它：

import React from 'react'
import Header from './header'
import Footer from './footer'
import Page from './page';
import { connect } from 'react-redux';

class AppLayout extends React.Component {
    render() {
        return (
            <>
                <Header />
                {this.props.children}
                <Footer />
            </>
        )
    }
}

const page = (props) => {
    return <AppLayout {...props} />

}

export default Page(connect(state => state)(page));

这不起作用，因为我正在使用布局丢失每一页的正文我在做什么错了？

store.js很简单：

import { createStore } from 'redux';
import reducer from './reducers';

export default createStore(reducer);

页面是：

import React from 'react';
import { Provider } from 'react-redux';
import store from './store/store';

const page = (Page) => {
    return (
        class PageWrapper extends React.Component {
            render() {
                return (
                    <Provider store={store}>
                        <Page />
                    </Provider>
                )
            }
        }
    )
}
export default page;

商店似乎将自己作为道具注入，以替换以前每个页面都有孩子的道具...这并不好，因为还需要以前的道具...

任何想法都会受到欢迎

Answer 1

问题是因为您没有给孩子打电话AppLayout。让我解释一下：

在您的PageWrapper中，您需要定义以下内容：

const page = (Page) => {
  return (
    class PageWrapper extends React.Component {
        render() {
            return (
                <Provider store={store}>
                    <Page />  // --> Page does not have children, so, you never gonna see anything
                </Provider>
            )
        }
    }
  )
}
export default page;

因此，您可以做很多事情来解决此问题，最简单的方法是清除代码，然后解决以下问题：

class AppLayout extends React.Component {
  render() {
    return (
        <Provider store={store}>
          <Header />
            {this.props.children}
          <Footer />
        </Provider>
    )
  }
}

export default AppLayout

或者仅添加渲染子代，如下所示：

const page = (Page) => {
  return (
    class PageWrapper extends React.Component {
        render() {
            return (
                <Provider store={store}>
                    <Page>
                      { this.props.children }
                    </Page>
                </Provider>
            )
        }
    }
  )
}

export default page;

将Redux Store连接到NextJS布局

1 个答案: