React js动态更改元标记

Question

我的应用程序有两个流程，一个是用户端，另一个是管理员端。 我的用户端是响应式的，所以我希望元标记说<meta name="viewport" content="width=device-width, initial-scale=1" />而我的管理端没有响应，所以我想强制浏览器以桌面模式打开，需要此元标记像这样<meta name="viewport" content="width=1024" />

我正在使用带有以下对象的react-document-meta

const metaUser = {
  title: "User meta tags",
  description: "Basically make the application responsive when on user side",
  meta: {
    name: { keywords: "viewport" },
    content: "width=device-width, initial-scale=1",
  },
};
const metaAdmin = {
  title: "Admin meta tags",
  description: "Make the application default in desktop mode",
  meta: {
    name: { keywords: "viewport" },
    content: "width=1024",
  },
};

但它会在 head 标签上创建新的元数据，而这些标签不起作用

Answer 1

我建议使用react-helmet 。

您可以使用 npm 命令安装它： npm i react-helmet

然后在您的组件/页面中导入：

import {Helmet} from "react-helmet";

并在Helmet组件中使用所有标签，您可以将其放在html的常规head标签中，语法为jsx

    <Helmet>
        <title>{`${admin ? "Admin Title" : "Client Title"}`}</title>
        <meta name="description" content={`${admin ? "Admin Content" : "Client Content"}`} />
    </Helmet>