Question

我正在尝试为next.js项目中的每个页面设置自定义标题。

假设这是我的简单布局

const MainLayout = props => {

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Head>
        <title>I AM TITLE</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta charSet="utf-8" />
      </Head>
      <Layout>
        <Content>{props.children}</Content>
        <FooterView />
      </Layout>
    </Layout>
  );
};

export default withTranslation('common')(MainLayout)

和登录页面。

import MainLayout from "../../components/layout/Layout";

class NormalLoginForm extends React.Component {

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <MainLayout>
        // LOGIN FORM
      </MainLayout>
    );
  }
}

const WrappedNormalLoginForm = Form.create({ name: "normal_login" })(
  NormalLoginForm
);

export default WrappedNormalLoginForm;

我只是找不到方法（我仍然很陌生）如何将标题从登录页面发送到布局像变量一样。谢谢您的帮助。

Answer 1

您将想要传递标题作为道具。

<MainLayout title='Login Page'>
  // LOGIN FORM
</MainLayout>

<title>{props.title}</title>

您还可以将标题作为动态变量传递：

<MainLayout title={loginPageTitle}>
  // LOGIN FORM
</MainLayout>

Nextjs将数据（页面标题）发送到组件

1 个答案: