li元素激活时通过react-helmet设置body类名失效如何解决

实现无滚动图片遮罩层效果时，需要在li元素激活状态下为body标签设置对应样式。使用react-helmet的Helmet组件实现该逻辑时出现异常：无论li是否激活，浏览器渲染的body标签class属性始终为空。
问题相关代码如下：

import React, { useState } from "react"
import { Helmet } from "react-helmet"

export default function ToggleActive({ children, size }) {
  const [isActive, setActive] = useState("false")

  const handleToggle = () => {
    setActive(!isActive)
  }

  return (
    <li className={isActive ? size : "active"} onClick={handleToggle}>
      <Helmet>
        <body className={isActive ? null : "no-scroll"} />
      </Helmet>
      {children}
      <button onClick={handleToggle} />
    </li>
  )
}

代码共有3处核心错误：

• 状态初始值类型错误：useState传入的初始值是字符串"false"，而非布尔值false。JS中非空字符串隐式转换为布尔值时为true，首次触发取反操作会得到布尔值false，后续状态判断逻辑会完全错乱。
• 类名判断逻辑倒置：li标签、body标签的类名判断规则和激活状态的预期逻辑完全相反，无法匹配需求。
• Helmet属性传值不符合规则：非激活状态下给body的className传null，会导致Helmet无法正确识别属性更新，无法正常渲染class值。

调整后可正常运行的完整代码：

import React, { useState } from "react"
import { Helmet } from "react-helmet"

export default function ToggleActive({ children, size }) {
  // 初始值改为布尔类型，移除字符串引号
  const [isActive, setActive] = useState(false)

  const handleToggle = () => {
    // 用函数式更新规避闭包导致的状态值异常
    setActive(prev => !prev)
  }

  return (
    <>
      {/* Helmet移至组件根层级，避免嵌套导致的更新识别问题 */}
      <Helmet>
        <body className={isActive ? "no-scroll" : ""} />
      </Helmet>
      {/* 修正li类名判断逻辑：激活时应用active类，否则应用传入的size类 */}
      <li className={isActive ? "active" : size} onClick={handleToggle}>
        {children}
        <button onClick={handleToggle} />
      </li>
    </>
  )
}

修复点说明 #

• 统一状态类型：将isActive的初始值改为布尔值false，避免隐式类型转换引发的逻辑错误。
• 对齐类名逻辑：isActive为true（激活状态）时，给body添加no-scroll类、给li添加active类，完全匹配需求。
• 修正Helmet传值：非激活状态下body的className传空字符串而非null，保证Helmet可以正确覆盖更新body的class属性，不会出现空属性或值残留问题。
• 优化更新逻辑：状态更新采用函数式写法，避免短时间内多次触发更新时，闭包缓存旧状态值导致的切换异常。
• 调整组件结构：用React Fragment包裹根节点，将Helmet从li内部移至根层级，避免DOM嵌套规则导致Helmet更新失效。

补充：如果项目使用React 18及以上版本，可替换为react-helmet-async，适配并发渲染场景下的head属性更新，兼容性更好。

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