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

然后在您的 component/page 中导入：

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>

React js 动态更改元标记

React js change meta tags dynamically

javascript

html

reactjs

meta-tags

react-dom