脚本标签内的 JSX 大括号？

Question

这是一个愚蠢的问题，但它让我困惑了一段时间。我目前正在尝试设计一个 Mithril.js 组件，该组件 returns 一个包含 <script> 标记的 <div> 对象。我只是尝试执行一些测试，到目前为止，我的 view() 方法看起来类似于以下内容：

view() {
    return (<div>
        <script>
            var x = 5;
            alert(x);
            var y = {"a" : 1, "b": 3}; // Compiler complains about the curly braces in this line
        </script>
    </div>);
}

一切似乎都找到了，直到我尝试定义对象的那一行，编译器在该行抱怨该行中的大括号。我的 VS Code 编辑器询问我是否打算用 {'{'} 和 {'}'} 或 { 和 } 替换大括号，但这似乎也无法解决问题。有没有什么方法可以在 JSX 的 <script> 标签内包含大括号？

Answer 1

您需要使用危险的SetInnerHTML，但不推荐使用。

<script
  dangerouslySetInnerHTML={{
    __html: `
            var x = 5;
            alert(x);
            var y = {"a" : 1, "b": 3};
        `,
  }}
/>

Answer 2

您可以通过执行 {'{'}（使用 single-character 字符串进行插值）和 {'}'} 在 JSX 中包含文字 { 和 }。

但在任何一种情况下，您都不应该曾经在视图中使用<script>。该视图已经在 JS 中 - 只需为此使用组件状态。

脚本标签内的 JSX 大括号？

JSX Curly Braces Inside Script Tag?

javascript

jsx

mithril.js