如何在 JSX 属性的字符串中注入 JavaScript？ [关闭]

【问题标题】：How to inject JavaScript inside JSX attribute's string? [closed]如何在 JSX 属性的字符串中注入 JavaScript？ [关闭]
【发布时间】：2021-11-07 11:25:14
【问题描述】：

我正在尝试将一些默认道具放入 className=" px-6 py-2 bg-black rounded-full text-black " 当我在其他地方使用这个组件时，我会将背景或文本颜色作为道具传递。

这种操作的正确语法是什么？

我试图在经典的 ${} 中使用重音 `，但它在我的 react 应用程序中不起作用。

<button className=`btn px-6 py-2 bg-${} rounded-full`>
  shop
</button>

【问题讨论】：

嗨！请使用tour，环顾四周，并通读help center，尤其是How do I ask a good question? 请作为文本发布代码、错误消息、标记和其他文本信息，而不是作为图片的文字。为什么：meta.stackoverflow.com/q/285551/157247

标签： javascript reactjs jsx

【解决方案1】：

您将使用 JSX 表达式，即 {expression}（在 JSX 上下文中）。所以你可能会在{} 中使用模板文字，就像这样（假设backgroundColor 和textColor 包含道具）：

return (
    <Button className={`px-6 py-2 bg-${backgroundColor} text-${textColor}`}>
        ...
    </Button>
);

不一定是模板字面量，也可以是字符串拼接表达式：

return (
    <Button className={"px-6 py-2 bg-" + backgroundColor + " text-" + textColor}>
        ...
    </Button>
);

或者为了避免 JSX 难以使用，请在 JSX 之前完成：

const theClass = `px-6 py-2 bg-${backgroundColor} text-${textColor}`;
return (
    <Button className={theClass}>
        ...
    </Button>
);

【讨论】：