如何使用模板文字动态更改 React 中的 Tailwind CSS 类？

Tailwind CSS：使用模板文字进行动态类更改

在 React 中使用条件样式时，利用 Tailwind CSS 中的模板文字是一个强大的功能动态修改类的技术。让我们深入探讨如何有效地实现这一点。

问题

一些开发人员在使用模板文字有条件地更改 Tailwind CSS 中的类时遇到问题。例如，类似于以下的代码可能无法按预期工作：

const closeNav = () => {
  setClick(!click);
};

<div className={`absolute inset-0 ${click ? "translate-x-0" : "-translate-x-full" } transform z-400 h-screen w-1/4 bg-blue-300`}></div>

解决方案

应用模板文字进行动态类更改的正确方法如下如下：

<div className={click ? "absolute inset-0 translate-x-0 transform z-400 h-screen w-1/4 bg-blue-300" : "absolute inset-0 -translate-x-full transform z-400 h-screen w-1/4 bg-blue-300"}></div>

或者，没有模板文字：

<div className={"absolute inset-0 " + (click ? "translate-x-0" : "-translate-x-full") + " transform z-400 h-screen w-1/4 bg-blue-300"}></div>

注意事项

避免使用字符串连接来创建类名，因为这可能会阻碍 Tailwind 的优化。相反，选择选择完整的类名称或使用类选择技术，如 classNames、clsx 或 Tailwind 特定的解决方案，如 twin.macro、twind 和 xwind。

其他选项

条件样式也可以使用第三方库（如类名或 clsx）或 Tailwind 特定的解决方案（如 twin.macro）来实现， twind 和 xwind。

进一步阅读

有关更多信息，请参阅以下资源：

• [React.js 有条件应用班级名称](https://stackoverflow.com/questions/39584486/conditionally-applying-class-names-in-react-js)
• [如何动态添加类到手动类名？](https ://www.sitepoint.com/dynamically-add-classes-javascript/)
• [处理条件样式的正确方法React](https://stackoverflow.com/questions/44916340/ Correct-way-to-handle-conditional-styling-in-react)
• [在 JSX 中嵌入表达式](https://reactjs.React) org/docs/jsx-in-depth.html#embedding-expressions-in-jsx)
• [模板文字 - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
• [优化生产 - 编写可清除的 HTML - Tailwind CSS](https:// tailwindcss.com/docs/optimizing-for-Production#writing-purgeable-html)

以上是如何使用模板文字动态更改 React 中的 Tailwind CSS 类？的详细内容。更多信息请关注PHP中文网其他相关文章！