create-react-app 在`index.html`文件中的更改没有反映出来,

hsvhsicv 于 8个月前发布在 React

关注(0)|答案(2)|浏览(135)

我已经使用create-react-app创建了一个React应用。

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",

当我尝试在public文件夹中的index.html中添加脚本标签时，当我启动开发服务器时，它没有得到反映。index.html文件被原始给出的HTML覆盖(在devtools中检查),甚至无法更改HTML中的标题，它会恢复为“React App”。我们需要做任何配置更改或类似的事情，以使index.html中的更改得以持久化吗？

create-react-app

来源：https://github.com/facebook/create-react-app/issues/11488

2条答案

按热度按时间

qybjjes11#

你声明你正在尝试添加脚本标签，但然后引用"React App",这是标题标签而不是脚本标签。所以我会继续尝试解决这两个问题。
1:假设你只想更改网站的标题，你可以在index.html的头部进行如下更改：
将 "React App" 改为其他内容***

useEffect(() => {
  const script = document.createElement('script');
  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;
  document.body.appendChild(script);
  return () => {
    document.body.removeChild(script);
  }
}, []);

这使得它成为自定义钩子的绝佳候选者(例如：hooks/useScript.js):

import { useEffect } from 'react';
const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    }
  }, [url]);
};
export default useScript;

使用方法如下：

import useScript from 'hooks/useScript';
const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');
  // rest of your component
}