javascript jsx 中的模板文字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49735097/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
template literals in jsx
提问by roberto
I want to use this but props
我想用这个但是道具
<section class="slider" data-slick='{"slidesToShow": 3,"autoplay": true, "responsive": [{"breakpoint":600,"settings":{"slidesToShow": 2}}]}'>
which should give
这应该给
<section class="slider" data-slick='{"slidesToShow":${props.number},"autoplay": ${props.autoplay}, "responsive": [{"breakpoint":${props.breakpoint},"settings":{"slidesToShow": ${props.show}}}]}'>
but as it's inside quote I try to use Template literalswith babel
like this
像这样
"babel": {
"presets": [
"es2015",
"stage-3"
],
"plugins": [
"transform-object-rest-spread",
[
"transform-react-jsx",
{
"pragma": "wp.element.createElement"
}
],["transform-es2015-template-literals"]
]
}
but it didn't get the value of my props it just send it like a quote.
但它没有得到我的道具的价值，它只是像报价一样发送它。
How should I use transform-es2015-template-literals to get my props value inside this quote
我应该如何使用 transform-es2015-template-literals 来获取我的 props 值
回答by ChrisR
You don't need to add the plugin to transform them, it's your syntax which is wrong.
您不需要添加插件来转换它们，这是您的语法错误。
You need to use backticks: ` instead of regular ticks (apostrophe): ' . And use curly brackets around that.
您需要使用反引号： ` 而不是常规的刻度（撇号）： ' 。并在其周围使用大括号。
<section
class="slider"
data-slick={`{"slidesToShow":${props.number},"autoplay": ${props.autoplay}, "responsive": [{"breakpoint":${props.breakpoint},"settings":{"slidesToShow": ${props.show}}}]}`}
>
回答by Nicholas Tower
You'll need to put curly brackets around the template string in order to break out of jsx and back into regular javascript. Also, the template string uses the back tick character (on the top left of a US qwerty keyboard) instead of a single quote:
您需要在模板字符串周围放置大括号，以便脱离 jsx 并返回到常规 javascript。此外，模板字符串使用反引号字符（在美国 qwerty 键盘的左上角）而不是单引号：
<section class="slider" data-slick={`{"slidesToShow":${props.number},"autoplay": ${props.autoplay}, "responsive": [{"breakpoint":${props.breakpoint},"settings":{"slidesToShow": ${props.show}}}]}`}>
