React Helmet
made with React

React Helmet

这是一个HTML文档head管理工具。

相关问答
暂无相关问题
查看全部
简介及使用教程

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>
    );
}

示例

作者

National Football League

相关项目

这是React的用于响应式设计的媒体查询组件。
这是一个React组件的轻型按键包装。
这是一个将React组件渲染到Sketch的工具。
这是一个可以在React中构建表单的组件。
这是一个用于React测试的实用程序。