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，将其放入常规head标签内html，语法为jsx

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