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与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

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

你需要使用反引号：`而不是常规的蜱（撇号）：＆＃39; 。并在其周围使用大括号。

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

Answer 2

您需要在模板字符串周围放置大括号，以便突破jsx并返回常规javascript。此外，模板字符串使用后面的刻度字符（在美国qwerty键盘的左上角）而不是单引号：

public void print(){
    String output = "{";
    for(PlsWork item : List) {
        output += item.getIP().toString();
        output += ", ";
    }
    output += "}";
    System.out.println(output);
}

jsx中的模板文字

2 个答案: