React中如何获取组件Props？实现站点标题动态传递

1. 抽离通用Head组件 #

先把你需要复用的头部逻辑单独做成一个通用组件，比如创建components/Head.js（用TS则为.tsx），代码调整如下（注意JSX里用大括号插值，不是模板字符串的$语法）：

export const Head = ({ siteTitle }) => {
  return (
    <>
      <title>{siteTitle} | Suffix</title>
      <meta property="og:locale" content="de_DE" />
      <meta property="og:type" content="website" />
    </>
  );
};

2. 在页面中导入并传参 #

在各个页面文件（index.js、about.js等）里，导入这个通用组件，然后传入对应页面的siteTitle：

index页面示例 #

// 导入通用Head组件，若命名冲突可加别名，比如import { Head as SiteHead } from '../components/Head'
import { Head } from '../components/Head';

// 导出页面级Head，传入当前页面的siteTitle
export const Head = () => <Head siteTitle="Home" />;

export default function Home() {
  return <div>首页内容</div>;
}

about页面示例 #

import { Head } from '../components/Head';

export const Head = () => <Head siteTitle="About" />;

export default function About() {
  return <div>关于页内容</div>;
}

关键注意事项 #

• JSX中变量插值必须用大括号{}，通用组件里的标题写法要修正为{siteTitle}，不能用模板字符串的${siteTitle}。
• 如果页面导出的Head和通用组件重名，给通用组件加别名导入即可避免冲突。
• 基于Gatsby、Next.js这类框架时，页面导出的Head组件会被框架自动识别并渲染到HTML头部，无需手动在页面内容里调用。

内容的提问来源于stack exchange，提问作者EinfachKonrad