我正在尝试为 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;
我只是找不到如何像变量一样将标题从登录页面发送到布局的方法(我还是新手)。感谢您的帮助。
最佳答案
您需要将标题作为 Prop 传递。
<MainLayout title='Login Page'>
// LOGIN FORM
</MainLayout>
<title>{props.title}</title>
您还可以将标题作为动态变量传递:
<MainLayout title={loginPageTitle}>
// LOGIN FORM
</MainLayout>
关于javascript - Nextjs 将数据(页面标题)发送到组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58877999/