html - Reactjs，更改 componentDidMount 中的图标

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 中更改 favicon 的最佳方法是什么(我搜索了很多但没有找到任何答案)。第二:我应该如何定义href。

Answer 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。