html - react /JSX : Rendered <script> Tag Adds Equals Sign and Quotes to async Attribute

Question

我用 Next.js/React 制作了一个简单的网络应用程序。其中一个功能组件(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 /> .

Answer 1

这是一个可行的丑陋解决方案:

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

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

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