React中如何用内联样式实现：item.email含空格时设为text-red-600

原代码的错误点 #

• 混淆className与style属性：text-red-600、text-gray-600是Tailwind CSS类，需放在className中，而非style（style接受的是CSS键值对对象）。
• 字符串判断语法错误：原代码中{item.email}.indexOf(' ') = -1存在语法错误，多余的大括号会导致解析失败，且用赋值符号=代替了比较符号，正确判断应为item.email.includes(' ')或item.email.indexOf(' ') !== -1。
• 无效Tailwind类：left-400不是Tailwind的合法类，若需设置left为400px，应改为left-[400px]（Tailwind v3+支持自定义像素值）。

正确实现代码 #

方式1：使用includes（更直观易读）

<div className={`relative text-sm w-64 left-[400px] ${item.email.includes(' ') ? 'text-red-600' : 'text-gray-600'}`}>
  {item.email}
</div>

方式2：使用indexOf

<div className={`relative text-sm w-64 left-[400px] ${item.email.indexOf(' ') !== -1 ? 'text-red-600' : 'text-gray-600'}`}>
  {item.email}
</div>

核心说明 #

• 通过模板字符串拼接className，利用三元表达式根据邮箱是否包含空格动态切换颜色类。
• includes(' ')直接检测字符串中是否存在空格，逻辑更清晰；indexOf(' ') !== -1则通过返回值判断是否找到空格（找到则返回索引，未找到返回-1）。

内容的提问来源于stack exchange，提问作者Lannie