Babel.js 如何在JSX中使用模板文字？

f2uvfpb9 于 11个月前发布在 Babel

关注(0)|答案(2)|浏览(156)

我想用这个但是 prop

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

型
但它没有得到我的 prop 的价值，它只是把它像一个报价。
我应该如何使用transform-es 2015-template-literals来获取这个引用中的props值

babeljs

来源：https://stackoverflow.com/questions/49735097/how-can-i-use-template-literals-in-jsx

2条答案

按热度按时间

az31mfrm1#

你不需要添加插件来转换它们，这是你的语法错误。
你需要使用反引号：`而不是常规的引号（撇号）：' .并在其周围使用花括号.

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

字符串

赞(0）回复(0）举报 11个月前

6fe3ivhb2#

你需要在模板字符串周围放上花括号，以便从jsx中分离出来并返回到常规的JavaScript中。此外，模板字符串使用反勾字符（在美国qwerty键盘的左上角）而不是单引号：

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

字符串

赞(0）回复(0）举报 11个月前

我来回答

Babel.js 如何在JSX中使用模板文字？

2条答案

相关问题

热门标签

最新问答