javascript - 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>