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中使用Template literals

像这样

"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来获取此引号中的道具值

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。此外，模板字符串使用反记号字符(在US qwerty键盘的左上角)，而不是单引号：

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