在React中实现cookie判断设置iframe src时报$未定义错误如何解决？

核心报错原因 #

• 抛出$ is not defined的直接原因是原参考实现基于jQuery编写，依赖全局$DOM操作对象，React项目默认不会内置引入jQuery，自然无法识别这个全局变量
• 哪怕手动在项目中引入jQuery，这种直接选中DOM元素修改属性的写法也不符合React的声明式渲染逻辑，容易出现DOM状态和React组件状态不同步的问题，长期维护隐患很大

适配React环境的实现方案 #

1. 替换原有依赖逻辑 #

首先完全移除jQuery相关的DOM操作代码，用浏览器原生能力实现对应功能：

• 实现原生Cookie读取方法，不需要引入额外第三方库：

  const getCookie = (cookieName) => {
    // 从当前域名的Cookie字符串中匹配指定名称的Cookie值
    const cookieReg = new RegExp(`(^| )${cookieName}=([^;]+)`)
    const matchRes = document.cookie.match(cookieReg)
    return matchRes ? matchRes[2] : ''
  }
  

• 把iframe的src属性从“手动修改DOM”的操作，改为根据Cookie值动态计算的组件渲染属性，不需要手动操作DOM。

2. 组件实现示例 #

注意 不推荐为了兼容原jQuery逻辑特意在React项目里全局引入jQuery，会无意义增加项目打包体积，还容易引发全局变量冲突。

无状态计算渲染（适合Cookie值不会动态变化的场景）

const UserYoutubeIframe = () => {
  const userVal = getCookie('usr_c')
  // 根据Cookie值动态计算src
  const iframeSrc = userVal 
    ? `https://youtube.com/?user=${userVal}`
    : 'https://youtube.com'

  return (
    <iframe
      frameBorder="1"
      id="user1"
      style={{ border: '2px inset black', width: '285px', height: '400px' }}
      src={iframeSrc}
    />
  )
}

带状态更新的实现（适合需要监听Cookie变化、动态更新iframe地址的场景）

import { useEffect, useState } from 'react'

const UserYoutubeIframe = () => {
  const [iframeSrc, setIframeSrc] = useState('https://youtube.com')

  useEffect(() => {
    // 组件挂载后读取Cookie值，计算对应src
    const userVal = getCookie('usr_c')
    setIframeSrc(
      userVal 
        ? `https://youtube.com/?user=${userVal}`
        : 'https://youtube.com'
    )
  }, [])

  return (
    <iframe
      frameBorder="1"
      id="user1"
      style={{ border: '2px inset black', width: '285px', height: '400px' }}
      src={iframeSrc}
    />
  )
}

额外说明 #

原代码中写的custom-frame-section属于非标准HTML属性，React会默认将其透传到最终渲染的DOM上，如果业务无特殊需求可以直接删除，避免控制台输出未知属性的告警。

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