掌控文档元信息：react-meta-tags 改善你的 React 应用

仰北帅Bobbie

于 2024-05-29 09:54:14 发布

阅读量368

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00045/article/details/139286853

版权

掌控文档元信息：react-meta-tags 改善你的 React 应用

react-meta-tagsHandle document meta/head tags in isomorphic react with ease.项目地址:https://gitcode.com/gh_mirrors/re/react-meta-tags

在构建同构的 React 应用时，管理和更新文档的 <title> 和 <meta> 标签是一项挑战。现在，有了 react-meta-tags 这个强大的库，你可以轻松地以声明式的方式处理这些标签，无论是客户端还是服务器端，都能做到无缝对接。相比其他如 react-helmet 和 react-document-meta 的解决方案，react-meta-tags 允许你在正常的 JSX 中直接书写标签，让代码更直观易读。

安装

通过 npm 快速安装：

npm install react-meta-tags --save

或者直接从 ./dist 获取编译后的开发和生产版本。

使用方法

使用 MetaTag 组件

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

class Component1 extends React.Component {
  render() {
    return (
        <div className="wrapper">
          <MetaTags>
            <title>页面 1</title>
            <meta name="description" content="一些描述。" />
            <meta property="og:title" content="我的应用" />
            <meta property="og:image" content="path/to/image.jpg" />
          </MetaTags>
          <div className="content"> 某些内容 </div>
        </div>
      )
  }
}

提示：为避免重复的标签，每个标签都应定义一个 ID。

ReactTitle 组件

如果只需要添加页面标题，可以使用 ReactTitle 组件。

import React from 'react';
import {ReactTitle} from 'react-meta-tags';

class Component2 extends React.Component {
  render() {
    return (
        <div className="wrapper">
          <ReactTitle title="页面 2"/>
          <div className="content"> 某些内容 </div>
        </div>
      )
  }
}

服务器端使用示例

import MetaTagsServer from 'react-meta-tags/server';
import {MetaTagsContext} from 'react-meta-tags';
/** 导入其他必要的模块 **/

app.use((req, res) => {
  // 对于每个请求，都要创建一个新的 metatags 实例
  const metaTagsInstance = MetaTagsServer();
  
  // React 路由匹配...
  
  // ...
  
  try{
    const reactString = ReactDomServer.renderToString(
      <Provider store={store}> {/* 如果你正在使用 Redux */}
      {/* 你需要将提取方法传递给 MetaTagsContext 以便捕获元标签 */}
        <MetaTagsContext extract = {metaTagsInstance.extract}>
          <RouterContext {...renderProps}/>
        </MetaTagsContext>
      </Provider>
    );

    // 将所有标题和元标签渲染成字符串
    const meta = metaTagsInstance.renderToString();
    
    // 将元标签字符串添加到你的 HTML 模板中
    const htmlStr = `
      <!doctype html>
      <html lang="en-us">
        <head>
          <meta charSet="utf-8"/>
          ${meta}
        </head>
        <body>
          <div id="content">${reactString}</div>
        </body>
      </html>  
    `;

    res.status(200).send(htmlStr);
  } catch (e) {
    res.status(500).send(e.stack);
  }
});