如何在JSX中使用模板字面量？

Question

我想使用这个，但是道具。

<section class="slider" data-slick='{"slidesToShow": 3,"autoplay": true,  "responsive": [{"breakpoint":600,"settings":{"slidesToShow": 2}}]}'>

应该给予的

<section class="slider" data-slick='{"slidesToShow":${props.number},"autoplay": ${props.autoplay},  "responsive": [{"breakpoint":${props.breakpoint},"settings":{"slidesToShow": ${props.show}}}]}'>

但由于它在引号内，我尝试使用模板字符串与babel。

就像这样。

"babel": {
    "presets": [
      "es2015",
      "stage-3"
    ],
    "plugins": [
      "transform-object-rest-spread",
      [
        "transform-react-jsx",
        {
          "pragma": "wp.element.createElement"
        }
      
    ],["transform-es2015-template-literals"]
    ]
  }

但它没有获取到我的 props 的值，只是像引用一样发送了它。

我应该如何使用 transform-es2015-template-literals 来在这个引用中获取我的 props 值？

- roberto

---

看起来你应该使用 JSON.stringify 而不是模板字符串。 - Bergi

Answer 1

你不需要添加插件来转换它们，是你的语法有误。

你需要使用反引号：` 而不是普通的引号（撇号）：'。并在其周围使用花括号。

<section 
    class="slider" 
    data-slick={`{"slidesToShow":${props.number},"autoplay": ${props.autoplay},  "responsive": [{"breakpoint":${props.breakpoint},"settings":{"slidesToShow": ${props.show}}}]}`}
>

- ChrisR

Answer 2

为了从jsx中跳出并回到常规javascript，您需要在模板字符串周围加上花括号。此外，模板字符串使用反引号字符（位于美国qwerty键盘的左上角）而不是单引号：

{`您需要在模板字符串周围加上花括号以从jsx中跳出并回到常规javascript。此外，模板字符串使用反引号字符（位于美国qwerty键盘的左上角）而不是单引号：`}

<section class="slider" data-slick={`{"slidesToShow":${props.number},"autoplay": ${props.autoplay},  "responsive": [{"breakpoint":${props.breakpoint},"settings":{"slidesToShow": ${props.show}}}]}`}>

- Nicholas Tower