react 修改 ＜meta＞

更改标题标签

public您可以在生成的项目的文件夹中找到源 HTML 文件。您可以编辑其中的<title>标签以将标题从“React App”更改为其他任何内容。

请注意，通常您不会public经常编辑文件夹中的文件。例如，添加样式表无需接触 HTML。

如果需要根据内容动态更新页面标题，可以使用浏览器document.titleAPI。对于更复杂的场景，当您想从 React 组件更改标题时，您可以使用第三方库React Helmet 。

如果您在生产中为您的应用程序使用自定义服务器并希望在将标题发送到浏览器之前对其进行修改，您可以按照本节中的建议进行操作。或者，您可以将每个页面预先构建为一个静态 HTML 文件，然后加载 JavaScript 包，这将在此处介绍。

在服务器上生成动态标签<meta>

由于 Create React App 不支持服务器渲染，您可能想知道如何使<meta>标签动态化并反映当前 URL。为了解决这个问题，我们建议在 HTML 中添加占位符，如下所示：

<span style="color:#1c1e21"><span style="background-color:#292d3e"><span style="color:#bfc7d5"><code><span style="color:#bfc7d5"><span style="color:#c792ea"><em><!</em></span><span style="color:#c792ea"><em>DOCTYPE</em></span> <span style="color:#c792ea"><em>html</em></span><span style="color:#c792ea"><em>></em></span>
</span><span style="color:#bfc7d5"><span style="color:#c792ea"><</span><span style="color:#ff5572">html</span> <span style="color:#ffcb6b">lang</span><span style="color:#c792ea">=</span><span style="color:#c792ea">"</span><span style="color:#ff5572">en</span><span style="color:#c792ea">"</span><span style="color:#c792ea">></span>
</span><span style="color:#bfc7d5">  <span style="color:#c792ea"><</span><span style="color:#ff5572">head</span><span style="color:#c792ea">></span>
</span><span style="color:#bfc7d5">    <span style="color:#c792ea"><</span><span style="color:#ff5572">meta</span> <span style="color:#ffcb6b">property</span><span style="color:#c792ea">=</span><span style="color:#c792ea">"</span><span style="color:#ff5572">og:title</span><span style="color:#c792ea">"</span> <span style="color:#ffcb6b">content</span><span style="color:#c792ea">=</span><span style="color:#c792ea">"</span><span style="color:#ff5572">__OG_TITLE__</span><span style="color:#c792ea">"</span> <span style="color:#c792ea">/></span>
</span><span style="color:#bfc7d5">    <span style="color:#c792ea"><</span><span style="color:#ff5572">meta</span> <span style="color:#ffcb6b">property</span><span style="color:#c792ea">=</span><span style="color:#c792ea">"</span><span style="color:#ff5572">og:description</span><span style="color:#c792ea">"</span> <span style="color:#ffcb6b">content</span><span style="color:#c792ea">=</span><span style="color:#c792ea">"</span><span style="color:#ff5572">__OG_DESCRIPTION__</span><span style="color:#c792ea">"</span> <span style="color:#c792ea">/></span>
</span><span style="color:#bfc7d5">  <span style="color:#c792ea"></</span><span style="color:#ff5572">head</span><span style="color:#c792ea">></span>
</span><span style="color:#bfc7d5"><span style="color:#c792ea"></</span><span style="color:#ff5572">html</span><span style="color:#c792ea">></span>
</span></code></span></span></span>

复制

然后，在服务器上，无论您使用哪种后端，您都可以读index.html入内存并将 , 和任何其他占位符替换__OG_TITLE__为__OG_DESCRIPTION__取决于当前 URL 的值。确保清理和转义插入的值，以便它们可以安全地嵌入到 HTML 中！

如果使用 Node 服务器，甚至可以在客户端和服务器之间共享路由匹配逻辑。但是，在基本情况下复制它也可以正常工作。

将数据从服务器注入页面

与上一节类似，您可以在 HTML 中保留一些注入全局变量的占位符，例如：

<span style="color:#1c1e21"><span style="background-color:#292d3e"><span style="color:#bfc7d5"><code><span style="color:#bfc7d5"><span style="color:#89ddff"><</span><span style="color:#89ddff">!</span>doctype html<span style="color:#89ddff">></span>
</span><span style="color:#bfc7d5"><span style="color:#89ddff"><</span>html lang<span style="color:#89ddff">=</span><span style="color:#c3e88d">"en"</span><span style="color:#89ddff">></span>
</span><span style="color:#bfc7d5">  <span style="color:#89ddff"><</span>head<span style="color:#89ddff">></span>
</span><span style="color:#bfc7d5">    <span style="color:#89ddff"><</span>script<span style="color:#89ddff">></span>
</span><span style="color:#bfc7d5">      <span style="color:#bfc7d5">window</span><span style="color:#c792ea">.</span><span style="color:#82aaff">SERVER_DATA</span> <span style="color:#89ddff">=</span> __SERVER_DATA__<span style="color:#c792ea">;</span>
</span><span style="color:#bfc7d5">    <span style="color:#89ddff"><</span><span style="color:#89ddff">/</span>script<span style="color:#89ddff">></span>
</span></code></span></span></span>

复制

然后，在服务器上，您可以__SERVER_DATA__在发送响应之前用真实数据的 JSON 替换。然后可以读取客户端代码window.SERVER_DATA以使用它。确保在将 JSON 发送到客户端之前对其进行清理，因为它会使您的应用容易受到 XSS 攻击。