$ ls ~yifei/notes/

React Helmet

Posted on:2021-08-18 07:47

Last modified:2023-01-19 18:41

React Helmet 用来在 React 更改 header 的内容。不过如果用 Nextjs 的话，直接用 next/head 就好了。

import React from "react";
import "./styles.css";

import { Helmet } from "react-helmet";

export default function App() {
  return (
    <div>
      <Helmet htmlAttributes>
        <html lang="en" />
        <title>Hello from React Helmet</title>
        <meta name="description" content="Basic example" />
      </Helmet>

      <div className="App">
        <h1>React Helmet Basic Example</h1>
      </div>
    </div>
  );
}

React helmet 支持 html, body 和 head 中的 title, base, meta, link, script, noscript, 和 style 标签。

尽量不要用 helmet 去加载 script 和 style，有更好的解决方案。

奇怪的 bug

在元素中直接使用 html 字符串拼接会报错，使用 JS 的字符串差值就可以，醉了。

Helmet expects a string as a child of <title>

<Helmet>
    <title>Product - { item.name }</title>
</Helmet>

// 改成

<Helmet>
    <title>{ `Product - ${ item.name }` }</title>
</Helmet>

参考

All contents are under the CC-BY-NC-SA license, if not otherwise specified.

Opinions expressed here are solely my own and do not express the views or opinions of my employer.

友情链接: MySQL 教程站