腳本標簽內的 JSX 花括號？

Question

這是一個愚蠢的問題，但它現在讓我難住了一段時間。 我目前正在嘗試設計一個 Mithril.js 組件，它返回一個包含<script>標簽的<div> object。 我只是嘗試執行幾個測試，到目前為止，我的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>);
}

一切似乎都找到了，直到我嘗試定義 object 的那一行，編譯器抱怨該行中的花括號。 我的 VS 代碼編輯器詢問我是否打算將大括號替換為{'{'}和{'}'}或{ 和} ，但這似乎也不能解決問題。 是否有某種方法可以在 JSX 的<script>標記中包含花括號？

Answer 1

您可以通過執行{'{'} （使用單字符串的插值）和{'}'}在 JSX 中包含文字{和} （如果適用）。

但無論哪種情況，您都不需要在視圖中使用<script> 。 該視圖已經在 JS 中 - 只需使用組件 state 即可。

Answer 2

您需要使用 dangerouslySetInnerHTML，但不建議這樣做。

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