jsx 中的模板文字答案

【问题标题】：template literals in jsxjsx 中的模板文字
【发布时间】：2018-09-18 23:30:03
【问题描述】：

我想用这个但是道具

<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 与 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 来获取这个引用中的道具值

【问题讨论】：

看起来你应该使用 JSON.stringifiy 而不是模板文字

标签： javascript reactjs babeljs template-literals

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：