javascript - 将数据从主布局传递到 Nextjs 中的子页面

Question

我正在尝试做这样的事情；

我有一个名为 /components/master_layout.js 的文件，它具有以下内容：

import useUser from "../data/use-user";

function MasterLayout({ children }) {

    const { data, error, mutate } = useUser();

    if ( error ) return <div>error</div>
    if ( !data && !error ) return <div>loading..</div>

    return (
        <div>
            {children}
        </div>
    )
}

export default MasterLayout

总之，这个布局文件是根据useuser函数的响应返回的。

这是我使用此布局的页面示例：

文件路径和名称：/pages/dashboard/index.js

import MasterLayout from "../../components/master_layout";

function Dashboard() {
    return (
        <MasterLayout>
            dashboard..
        </MasterLayout>
    )
}

export default Dashboard

我可以在“/pages/dashboard/index.js”和我的其他页面中使用来自布局的 useUser 数据吗？

我想要这个的原因是，我正在尝试做类似的事情：

import MasterLayout from "../../components/master_layout";

function Dashboard({data}) {
    return (
        <MasterLayout>
            Welcome back, {data.username}
        </MasterLayout>
    )
}

export default Dashboard

除了将每个页面的 useUser 一个一个拉出来并将其传输到主布局之外，我还有其他选择吗？

标签： javascriptreactjsnext.js

Answer 1

在这种情况下，您可以使用 HOC 模式。就像是

// with-data.js

import React from "react";
import useUser from "../data/use-user";

const withData = (WrappedComponent) => {
  class WithData extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        data: "",
      };
    }

    componentDidMount() {
      const { data, error, mutate } = useUser();
      this.setState({data:data});
    }

    render() {
      const { data, ...otherProps } = this.props;

      return (
        <WrappedComponent data={this.state.data}/>
      ) 
      //* See how we can enhance the functionality of the wrapped component
    }
  }

  return WithData;
};

export default withData;

现在您可以使用withData，

import MasterLayout from "../../components/master_layout";
import withData from "../withData.js"

function Dashboard({data}) {
    return (
        <MasterLayout>
            Welcome back, {data.username}
        </MasterLayout>
    )
}

export default withData(Dashboard);

事实上，用 withData 包裹任何组件，都可以访问 data 变量。