JSX在脚本标记中花括号？

问题描述

这是一个愚蠢的问题，但现在困扰了我一段时间。我目前正在尝试设计一个Mithril.js组件，该组件返回一个包含<div>标签的<script>对象。我只是尝试执行一些测试，到目前为止，我的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代码编辑器询问我是否要用{'{'}和{'}'}或{和}替换括号，但这似乎也不能解决问题。是否有某种方式可以在JSX的<script>标签中包含花括号？

解决方法

您可以通过执行{（使用单字符字符串的插值）和}（如果适用）在JSX中包含文字{'{'}和{'}'}。

但是无论哪种情况，您都不必在视图 ever 中使用<script>。该视图已经在JS中-只需使用组件状态即可。

,

您需要危险地使用SetInnerHTML，但不建议这样做。

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