Nextjs 向组件发送数据(页面标题)

我正在尝试为我的 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;

我只是找不到如何将标题从登录页面发送到像变量一样的布局的方法(我仍然是新手)。感谢您的任何帮助。


蓝山帝景
浏览 386回答 1
1回答

www说

您将希望将标题作为道具传递。<MainLayout title='Login Page'>&nbsp; // LOGIN FORM</MainLayout><title>{props.title}</title>您还可以将标题作为动态变量传入:<MainLayout title={loginPageTitle}>&nbsp; // LOGIN FORM</MainLayout>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript