React Helmet的简介及使用教程

React Helmet是一个HTML文档head管理工具，管理对文档头的所有更改。React Helmet采用纯HTML标记并输出纯HTML标记，非常简单，对React初学者十分友好。

特点

支持所有有效的head标签: title、 base、 meta、 link、 script、 noscript、和style。
支持body、 html 和 title 的属性
支持服务端渲染
嵌套组件覆盖重复的head标签更改。
在同一组件中定义时，将保留重复的head标签更改。(支持如"apple-touch-icon"的标签).
支持跟踪DOM更改的回调

安装

Npm

npm i react-helmet

Yarn

yarn add 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>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

嵌套组件或后面的组件会覆盖重复的head标签更改：

<Parent>
    <Helmet>
        <title>My Title</title>
        <meta name="description" content="Helmet application" />
    </Helmet>

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

服务端使用 在服务端使用，需要在 ReactDOMServer.renderToString 或ReactDOMServer.renderToStaticMarkup 后调用 Helmet.renderStatic() 来获得你预渲染的head数据。

ReactDOMServer.renderToString(<Handler />);
const helmet = Helmet.renderStatic();

helmet实体包括以下属性：

base
bodyAttributes
htmlAttributes
link
meta
noscript
script
style
title

每个属性都有toComponent() 和toString()方法：

作为String输出：

const html = `
    <!doctype html>
    <html ${helmet.htmlAttributes.toString()}>
        <head>
            ${helmet.title.toString()}
            ${helmet.meta.toString()}
            ${helmet.link.toString()}
        </head>
        <body ${helmet.bodyAttributes.toString()}>
            <div id="content">
                // React stuff here
            </div>
        </body>
    </html>
`;

作为React组件使用：

function HTML () {
    const htmlAttrs = helmet.htmlAttributes.toComponent();
    const bodyAttrs = helmet.bodyAttributes.toComponent();

    return (
        <html {...htmlAttrs}>
            <head>
                {helmet.title.toComponent()}
                {helmet.meta.toComponent()}
                {helmet.link.toComponent()}
            </head>
            <body {...bodyAttrs}>
                <div id="content">
                    // React stuff here
                </div>
            </body>
        </html>
    );
}

React Helmet made with React

安装

使用

示例

React Helmet
made with React