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

但因为它在引号内，所以我尝试使用 Template literals with 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 来获取此引用中的道具值

Answer 1

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

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

Answer 2

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

您需要使用反引号：` 而不是常规刻度（撇号）：'。并在其周围使用大括号。

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

jsx 中的模板文字

template literals in jsx

javascript

reactjs

babeljs

template-literals