小开

最佳答案

我在一个较老的项目中使用了反应-文档-元。

定义你的元数值

const meta = {
title: 'Some Meta Title',
description: 'I am a description, and I can create multiple tags',
canonical: 'http://example.com/path/to/page',
meta: {
charset: 'utf-8',
name: {
keywords: 'react,meta,document,html,tags'
}
}

然后放置一个

<DocumentMeta {...meta} />

作为回报

小开

你可以使用反应元标签。它允许您以声明的方式和普通的 jsx 格式编写 title 和其他 meta 标记，这些标记将移动到 head (查看 doc 上的服务器使用情况)。

import React from 'react';
import MetaTags from 'react-meta-tags';


class Component1 extends React.Component {
render() {
return (
<div class="wrapper">
<MetaTags>
<title>Page 1</title>
<meta id="meta-description" name="description" content="Some description." />
<meta id="og-title" property="og:title" content="MyApp" />
<meta id="og-image" property="og:image" content="path/to/image.jpg" />
</MetaTags>
<div class="content"> Some Content </div>
</div>
)
}
}

如果您有一个高级用例，您也可以检查反应头盔。

小开

您还可以按照以下方式给出页面标题和 meta 标记描述。

在 index.html 文件中放置描述的元标记，如下所示。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Dynamic Page title here</title>

在你的。Js 文件或。Render ()方法下面的 jsx 文件为页面编写如下所示的页面标题和元描述。

render()
{
document.title ="Welcome | here is your page title to display";
document.getElementsByTagName("META")[2].content="Your description about the page or site here to set dynamically";


return(
<div>Page content</div>
);
}

小开

根据官方文档反应文件-标题和元标签，您还可以使用反应头盔

小开

你几乎肯定想用:

反应头盔

与 react-meta-tags不同的是，它可以嵌套 <Helmet>，因此你可以在类似应用程序的 <title>中定义元标记，这些元标记应该相互覆盖。与 react-document-meta不同的是，您可以使用 jsx 定义事物(并嵌套事物)。

这似乎是社区几乎完全使用的解决方案——每周600,000次下载，而其他解决方案只有6,000次。”Helmet 接受普通 HTML 标记并输出普通 HTML 标记。这非常简单，而且对初学者非常友好。”- 并支持服务器端渲染。

下面是一个改编自头版的例子:

<Parent>
I'm a parent
<Helmet>
<title>My Title</title>
<meta name="description" content="Helmet application" />
</Helmet>
 

<Child>
I'm a child
<Helmet>
<title>Nested Title</title>
<meta name="description" content="Nested component" />
</Helmet>
</Child>
</Parent>

产出:

<head>
<title>Nested Title</title>
<meta name="description" content="Nested component">
</head>
<Parent>
I'm a parent
<Child>
I'm a child
</Child>
</Parent>

小开

不确定这是否是你想要的答案，但我正在寻找如何更新你的反应应用程序显示的信息，当你预览其他应用程序中的链接。我尝试的每一个解决方案都不适用于 github 页面，也不适用于 response (反应-头盔、反应-元标签、反应-文档-元)。最后的工作是，您可以编辑位于 public文件夹内的 index.html来更改此信息。把这句话记在脑子里:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/IMDB.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>IMDB</title>
<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
<meta property="og:description"
content="Sean Connery found fame and fortune as the
suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="http://example.com/bond/trailer.swf" />

来自 https://ogp.me/的例子

小开

首先，如果你不需要动态数据，你可以编辑 public/index.html。

对于动态数据，反应小组建议要么使用反应头盔

import React from "react";
import { Helmet } from "react-helmet";


class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>React app</title>
<meta name="description" content="React application" />
</Helmet>
...
</div>
);
}
};

或者使用占位符和替换他们的服务器端:

<html lang="en">
<head>
<meta property="og:title" content="__OG_TITLE__" />
<meta property="og:description" content="__OG_DESCRIPTION__" />
</head>
</html>

小开

您可以使用文档查询并更新它们的值。

const setTitle = title => {
const el = document.querySelector('title');
el.innerText = `${el.text} | ${title}`;
};


const setDescription = desc => {
const el = document.querySelector("meta[name='description']");
el.setAttribute('content',desc)
}

小开

正如 create-react-app 医生所提到的:

如果需要根据内容动态更新页面标题，可以使用浏览器 document.title API。对于更复杂的场景，如果希望更改 React 组件的标题，可以使用第三方库反应头盔。

举个简单的例子:

function App(){
document.title = "Home";
return (
<div>...</div>
)
}

小开

也许已经很晚了，但你可以很简单地这样做:

只需在组件中使用 useEffect()，比如:

useEffect(() => {
document.head.innerHTML+=`
<meta name='description' content='My description value!!!'/>
<meta name='keywords' content='My keywords!!!'/>
`
}, []);

小开

 import React from 'react'
import { Helmet, HelmetProvider } from 'react-helmet-async';


const MetaData = ({ title }) => {
return (
<HelmetProvider>
<Helmet>
<title>{`${title} -  title description`}</title>
</Helmet>
</HelmetProvider>
)
}


export default MetaData

如何更新 React.js 中的 meta 标记？

反应头盔