React Helmet

React Helmet 用来在 React 程序中更改 header 的内容。

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>

参考

  1. https://www.newline.co/@dmitryrogozhny/when-to-use-and-when-to-avoid-using-react-helmet–bf6f62d5
  2. https://github.com/nfl/react-helmet/issues/274

及时获取更新,请关注公众号“爬虫技术学习”(spider-learn)

多年大厂求职&面试官经验,简历付费优化,¥ 500/次。

公众号“爬虫技术学习(spider-learn)”

About 逸飞

后端工程师

发表评论

邮箱地址不会被公开。 必填项已用*标注