eed*_*rah 23
您几乎肯定要使用：
与react-meta-tags它相反，它可以嵌套<Helmet>s，因此您可以在应用程序的深处定义元标记 - 就像<title>s 应该相互覆盖。与此相反，react-document-meta您可以使用 jsx（和嵌套事物）定义事物。
这似乎是社区几乎完全使用的解决方案 - 每周下载 600,000 次，而其他解决方案中给出的则是 6,000 次。“Helmet 采用纯 HTML 标签并输出纯 HTML 标签。它非常简单，而且 React 初学者友好。” - 并支持服务器端渲染。
这是一个改编自首页的例子：
<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>
Sud*_*dav 17
您可以使用react-meta-tags.它允许您以声明方式和正常的jsx格式编写标题和其他元标记,这些格式将被移动到头部(检查文档上的服务器使用情况).
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>
)
}
}
如果您有高级用例,您可能还想查看react-helmet.
小智 14
我在旧项目中使用了react-document-meta.
只需定义您的元值
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} />
在回报中
thi*_*ign 11
首先，如果您不需要动态数据，您可以直接编辑public/index.html.
对于动态数据，React 团队建议使用React-helmet
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>
您还可以通过以下方式提供页面标题和元标记说明.
像这样在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>
);
}
小智 6
您可以使用文档查询并更新它们的值。
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)
}
| 归档时间： |
|
| 查看次数： |
38183 次 |
| 最近记录： |