Fatal编程技术网
  • javascript/
  • Javascript 如何在next.js中创建动态标题<；头>；部门？

Javascript 如何在next.js中创建动态标题<；头>；部门？

javascript reactjs next.js

Javascript 如何在next.js中创建动态标题<；头>；部门？,javascript,reactjs,next.js,Javascript,Reactjs,Next.js,我有一个功能齐全的网站，但标题部分没有检索特定于页面的和 例如，如果我在about页面上，带有title标签“about me”，我希望在标签中呈现“about me”。我基本上需要的是在我的头部组件中加载道具、变量或类似的东西，包括实际的标题和描述。我已经阅读了官方文档中的一些示例，但是没有使用动态数据更新头部的示例 这是我的组件的当前代码： import React from 'react'; import NextHead from 'next/head'; const Head = (

我有一个功能齐全的网站，但标题部分没有检索特定于页面的
和

例如，如果我在about页面上，带有title标签“about me”，我希望在
标签中呈现“about me”。我基本上需要的是在我的头部组件中加载道具、变量或类似的东西，包括实际的标题和描述。我已经阅读了官方文档中的一些示例，但是没有使用动态数据更新头部的示例

这是我的组件的当前代码：

import React from 'react';
import NextHead from 'next/head';

const Head = ({ title, description }) => (
    <NextHead>
        <meta charSet="UTF-8" />
        <title>My Website{title}</title>
        <meta name="description" content={description || ''} />
        <meta name="viewport" content="width=device-width, initial-scale=1" key="viewport" />
    </NextHead>
);

import React from 'react';
import NextHead from 'next/head';

const Head = ({ title, description, children }) => (
    <NextHead>
        <meta charSet="UTF-8" />
        {children}
        <meta name="description" content={description || ''} />
        <meta name="viewport" content="width=device-width, initial-scale=1" key="viewport" />
    </NextHead>
);

从“React”导入React；
从“下一个/head”导入下一个AD；
常数头=（{title，description}）=>(
我的网站{title}
);
我已经为帖子和页面创建了Layout.js组件。前面描述的
将导入布局组件中

import React from 'react';
import Head from '../components/Head';


export default ({ children, as, settings = {}, title="default text" }) => (
    <main>
        <Head>
            <title>{title}</title>
        </Head>
        <div className="app__container">
            <div className="row">{children}</div>
        </div>
    </main>
);

从“React”导入React；
从“../components/Head”导入Head；
导出默认值（{children，as，settings={}，title=“default text”}）=>(
{title}
{儿童}
);
例如，当我在/work/great client时，我会看到一个更新的
标签，上面有great client

，它应该是：

import React from 'react';
import Head from '../components/Head';

export default ({ children, as, settings = {}, title="default text" }) => (
    <main>
        <Head title={title}>
        <div className="app__container">
            <div className="row">{children}</div>
        </div>
    </main>
);

从“React”导入React；
从“../components/Head”导入Head；
导出默认值（{children，as，settings={}，title=“default text”}）=>(
{儿童}
);
如果要将其用作头部的子对象，则必须修改头部组件：

import React from 'react';
import NextHead from 'next/head';

const Head = ({ title, description }) => (
    <NextHead>
        <meta charSet="UTF-8" />
        <title>My Website{title}</title>
        <meta name="description" content={description || ''} />
        <meta name="viewport" content="width=device-width, initial-scale=1" key="viewport" />
    </NextHead>
);

import React from 'react';
import NextHead from 'next/head';

const Head = ({ title, description, children }) => (
    <NextHead>
        <meta charSet="UTF-8" />
        {children}
        <meta name="description" content={description || ''} />
        <meta name="viewport" content="width=device-width, initial-scale=1" key="viewport" />
    </NextHead>
);

从“React”导入React；
从“下一个/head”导入下一个AD；
常数头=（{标题、描述、子项}）=>(
{儿童}
);
我在第二个示例中尝试了一点之后，它就开始工作了

下面的代码中有更多的解释

下面的示例代码显示了包含共享组件的Post.js。在布局中，我添加并添加了
{props.meta.title}
。现在可以检索特定于页面/帖子的动态标题标签了

const Post = props => {
    const {
        content,
        meta: { title },
    } = props;


    return (
        <Layout>
            <Head>
                <title>{props.meta.title}</title>
            </Head>
            <div className="post">
                <div className="content-inner">
                        <h1>{title}</h1>
                    <article dangerouslySetInnerHTML={{ __html: content }} />
                </div>
            </div>
        </Layout>
    );
};

Post.getInitialProps = function(reqOrContext) {
    const { slug } = reqOrContext.query;
    let content = require(`../work/${slug}.md`);
    const converter = new Converter({ metadata: true });
    content = converter.makeHtml(content);
    const meta = converter.getMetadata();
    return { content, meta };
};

export default withRouter(Post);

const Post=props=>{
常数{
内容,，
元：{title}，
}=道具；
返回(
{props.meta.title}
{title}
);
};
Post.getInitialProps=函数（reqOrContext）{
const{slug}=reqOrContext.query；
let content=require（`../work/${slug}.md`）；
const converter=new converter（{metadata:true}）；
content=converter.makeHtml（content）；
const meta=converter.getMetadata（）；
返回{content，meta}；
};
使用路由器（Post）导出默认值；
谢谢您的回复。您的第一个示例适用于静态文本，如“默认文本”。但是，我想找到一种方法，在
头部加载动态数据。基本上我想要达到的是；如何检索特定于页面的标题、说明文本并将其添加到
？我不明白第二种解决办法。当我使用console.log子项时，我会得到未定义的子项。