Reactjs，更改componentDidMount中的favicon答案

【问题标题】：Reactjs, change the favicon in componentDidMountReactjs，更改componentDidMount中的favicon
【发布时间】：2019-05-20 07:59:38
【问题描述】：

我想根据一些属性更改 Reacjs 应用程序的 favicon。我已经将图标保存在public 文件夹中，但找不到将路径作为href 提供给新创建元素的方法。

  componentDidMount() {
    const { project } = this.props.rootStore!;
    let link = document.createElement('link');
    const oldLink = document.getElementById('favicon');
    link.id = 'favicon';
    link.rel = 'shortcut icon';
    link.href = // here I tried the following string literals
    if (oldLink) {
      document.head.removeChild(oldLink);
    }
    document.head.appendChild(link);
  }

link.href='%PUBLIC_URL%/assets/images/' + project.id + '/favicon.ico';
// TypeError: Cannot read property 'id' of undefined

link.href = `%PUBLIC_URL%/assets/images/${project.id}/favicon.ico`;
// TypeError: Cannot read property 'id' of undefined

link.href = '%PUBLIC_URL%/assets/images/${project.id}/favicon.ico';
// GET http://localhost:3000/demo/category/showroom/%PUBLIC_URL%/assets/images/$%7Bproject.id%7D/favicon.ico 400 (Bad Request)

现在我的问题可以是第一个：在 Reacjs 中更改 favicon 的最佳方法是什么（我搜索了很多但没有找到任何答案）。第二：我应该如何定义href。

【问题讨论】：

错误Cannot read property 'id' of undefined 表示project 未定义。未定义的原因未显示。
@estus :D 是的，谢谢。我当时心情很生气，为什么路径不起作用，没有得到id与项目对象有关

标签： html reactjs href favicon

【解决方案1】：

没有最好的方法来做到这一点。 React 不提供处理应用程序外部现有 DOM 元素的功能。这应该在 React 中完成，就像在 vanilla JavaScript 中一样：

let link = document.querySelector('link[rel="shortcut icon"]') ||
  document.querySelector('link[rel="icon"]');

if (!link) {
    link = document.createElement('link');
    link.id = 'favicon';
    link.rel = 'shortcut icon';
    document.head.appendChild(link);
}

link.href = `/assets/images/${id}/favicon.ico`;

href 最好包含绝对路径或 URL，以提供正确的图标位置，而不考虑基本 URL。

【讨论】：

属性rel 不存在于类型Element 属性'href' 上不存在类型'元素'
感谢您的回答，我之前的评论是 TypeScript 类型错误
不客气。这个问题没有提到你使用 TS。那么link 应该输入为HTMLLinkElement。

【解决方案2】：

一种 React-y 方法是使用 react-helmet

使用该库，您可以更改 <head> 中的元素

例如。

import Helmet from 'react-helmet'

...

<Helmet>
  <title>ABC</title>
  <meta name="ABC" content: "ABC" />
  <link rel="icon" type="image/png" href="favicon.ico" sizes="16x16" />
</Helmet>

【讨论】：

【解决方案3】：

npm install react-meta-tags --save

https://github.com/s-yadav/react-meta-tags

在我的项目中对此非常满意。 Helmet 是另一种选择。

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

class Component1 extends React.Component {
  render() {
    return (
        <div className="wrapper">
          <MetaTags>
            <title>Page 1</title>
            <meta name="description" content="Some description." />
            <meta property="og:title" content="MyApp" />
            <meta property="og:image" content="path/to/image.jpg" />
          </MetaTags>
          <div className="content"> Some Content </div>
        </div>
      )
  }
}

【讨论】：

值得一提的是react-helmet的人气明显更高