React的ClassName属性无法使用$符号拼接动态类名如何解决

错误原因 #

你原来的代码存在3个问题：

• 属性名写错：React中用className指定类名，不能写成class Name带空格的形式
• 模板字符串语法错误：ES6模板字符串需要用反引号`包裹，你用了普通引号，${}插值语法不会生效
• 类名字符串拼接逻辑错误：你写的字符串里多了多余的引号和无效的代码片段

正确实现方式 #

你只需要提前定义好判断消息归属的变量，比如isMyMessage，值为true代表是当前登录用户发送的消息，false代表是对方发送的消息，下面给3种常用实现方案：

方案1：模板字符串拼接（最常用，无需额外依赖）

// 示例判断逻辑，替换成你实际的业务逻辑即可
const isMyMessage = message.senderId === currentLoginUserId;

return (
  <p className={`chat-message ${isMyMessage ? 'chat-sender' : 'chat-receiver'}`}>
    {message.content}
  </p>
)

方案2：数组合并类名（适合多类名动态判断场景）

const isMyMessage = message.senderId === currentLoginUserId;
// 可以随时往数组里加其他动态类名
const classList = ['chat-message', isMyMessage ? 'chat-sender' : 'chat-receiver'];

return (
  <p className={classList.join(' ')}>
    {message.content}
  </p>
)

方案3：使用clsx库（适合复杂多条件类名判断场景）

如果你的类名判断逻辑非常多，可以引入轻量工具库clsx简化写法：

import clsx from 'clsx';

const isMyMessage = message.senderId === currentLoginUserId;
const isMessageRead = message.status === 'read';

return (
  <p className={clsx(
    'chat-message',
    isMyMessage ? 'chat-sender' : 'chat-receiver',
    // 多条件类名示例，符合条件才会追加对应的类
    {'chat-read-mark': isMessageRead && isMyMessage}
  )}>
    {message.content}
  </p>
)

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