React / JSX：渲染的 <script> 标记将等号和引号添加到异步属性

Posted 2023-02-21

【中文标题】React / JSX：渲染的 <script> 标记将等号和引号添加到异步属性

【英文标题】：React / JSX: Rendered <script> Tag Adds Equals Sign and Quotes to async Attribute

【发布时间】：2021-05-18 01:21:00

【问题描述】：

我使用 Next.js / React 制作了一个简单的 Web 应用程序。其中一个功能组件（Next.js“页面”）返回一些包含类似

标签的 JSX

<script async src="https://example.com/file.js"></script>

但是，当我查看呈现页面的页面源时，我看到 async 被呈现为 async=""。有没有办法强制逐字呈现属性/标签而不是添加等号和引号？是针对这个特定的标签，还是一般来说？

编辑：这是一个显示不良行为的最小 JSFiddle：https://jsfiddle.net/1vbnms3j/。这显然只是一个 React / JSX 问题，与 Next.js 无关。我尝试过诸如https://github.com/facebook/react/issues/9230#issuecomment-388118729 之类的解决方案，但async=''、async=true、async=undefined 似乎都不起作用。无论我使用<script></script> 还是<script />，也没有什么区别。

【参考方案1】：

这是一个有效的丑陋解决方案：

<script dangerouslySetInnerhtml= __html: `</script><script async src="https://example.com/file.js"></script><script>`,/>

这会正确呈现我的标签（async 属性显示正确且位置正确），但会在我的标签前后生成不必要的<script></script>（尽管这些大多是无害的）。

如果可能的话，我仍然想要一个不会生成不必要标签的更清洁的解决方案。

【讨论】：

你看到了吗？ github.com/facebook/react/issues/11624

是的。在我的用例中，我有一个外部脚本，它正在检查页面源代码中是否存在（精确字符串匹配）类似<script src="magic.js" async></script> 的东西，所以我需要async 而不是async=''。但我认为结果是没有一个干净的官方解决方案，在没有人做出反应 PR 的情况下，可能需要像上面这样的一些黑客攻击。

我昨天也遇到了同样的问题。关于该问题链接的讨论说 async="" 也是一种有效的编写方式，因此 async 或 async='' 并没有真正的区别！？虽然我还没有测试过，但如果是这样，那么我们应该对任何一个都很好。

有效的 HTML 与算法可能期望在源代码中找到的不同。如果一个算法确实试图在你的代码中匹配“