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"]
    ]
  }

但它没有得到我的道具的价值，它只是像报价一样发送它。

我应该如何使用 transform-es2015-template-literals 来获取我的 props 值

Answer 1

您不需要添加插件来转换它们，这是您的语法错误。

您需要使用反引号: ` 而不是常规的刻度 (撇号): ' 。并在其周围使用大括号。

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

Answer 2

您需要在模板字符串两边加上大括号，以便脱离 jsx 并返回到常规 javascript。此外，模板字符串使用反勾号字符（位于美国 qwerty 键盘的左上角）而不是单引号：

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