Question

我想根据一些属性来更改Reacjs应用程序的图标。我已经将图标保存在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中更改收藏夹图标的最佳方法是什么（我进行了很多搜索，但未找到任何答案）。第二：我应该如何定义href。

Answer 1

一种执行此操作的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>

Answer 2

没有最佳方法来执行此操作。 React没有提供处理应用程序外部现有DOM元素的功能。这应该在React中完成，就像在原始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无关。

Answer 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.js，在componentDidMount中更改图标

3 个答案: