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

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 向组件发送数据（页面标题）

Nextjs send data (title of page) to component

javascript

node.js

reactjs

next.js