前言
在实际应用中,有的时候需要根据变量动态调整元素样式。
书写
<Button
size="xs"
className={`bg-[#21242a] text-xs mt-1 mb-1
${isSelecting?'w-20':"w-full"}`}
onClick={() => {
setIsSelecting(!isSelecting);
}}
>
{isSelecting ? "Done" : "Edit track"}
className={`bg-[#21242a] text-xs mt-1 mb-1 ${isSelecting?'w-20':"w-full"}`}
解读语法:
1.在 JSX 中,最外层的 {} 被用来嵌入 JavaScript 表达式。这是 React 和 JSX 的一个特性,允许你将动态内容如变量、函数调用、条件表达式等插入到渲染的输出中。
2.中间使用了ES6的模版字符,在模板字符串中,可以用 ${} 来包裹一个 JavaScript 表达式,该表达式的结果将被转换为字符串并插入到模板字符串的相应位置。