React项目中className属性获NaN值，激活链接样式报错求解决

你的问题根源在于错误使用了*运算符拼接字符串——JavaScript里字符串与字符串相乘会返回NaN，当这个NaN被传给元素的className属性时，就会触发你看到的错误提示。

修复方法 #

把字符串拼接的*换成字符串连接符+，或者直接将className写成完整的单字符串：

方式1：使用+拼接字符串

const activeClassName =
  'relative before:content-[' +
  '] before:-top-4 before:left-1/2 before:-ml-1 before:absolute before:text-amber-400'

方式2：直接写成完整字符串

如果不需要拆分字符串，直接写整段className更简洁：

const activeClassName = 'relative before:content-[] before:-top-4 before:left-1/2 before:-ml-1 before:absolute before:text-amber-400'

另外补充：Tailwind的before:content-[]是用于生成空伪元素的写法，符合你的激活标记需求；如果后续需要给伪元素加文本内容，记得写成before:content-['激活标记']这种格式，用单引号包裹内容。

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