如何在React函数组件中适配集成从CodePen导出的前端资源

原CodePen导出的交互脚本存在两个核心适配问题：

1. 原生脚本执行时机早于React组件DOM挂载完成，执行document.getElementById时获取不到对应元素，直接抛出空值报错
2. 全局DOM查找的逻辑在多实例组件场景下会出现元素匹配错乱

下面给出两种可直接落地的实现方式：

方案一：基于React原生能力改造（生产环境推荐） #

完全弃用原生DOM查找、手动操作类名的逻辑，用React的状态管理、内置事件绑定实现和原脚本完全一致的交互效果，从根源上规避时机问题和多实例冲突。
完整实现：

import React, { useState } from 'react'
// 引入CodePen导出的样式文件
import './style.css'

const SlideSignInUp = () => {
  // 用状态替代原脚本里的classList操作，控制面板切换
  const [isRightActive, setIsRightActive] = useState(true)

  // 复用原脚本的表单拦截逻辑，直接绑定在form元素上
  const preventSubmit = (e) => e.preventDefault()

  return (
    <div className={`container ${isRightActive ? 'right-panel-active' : ''}`}>
      {/* 注册表单模块 */}
      <div className="container__form container--signup">
        <form 
          action="#" 
          className="form" 
          id="form1" 
          onSubmit={preventSubmit}
        >
          <h2 className="form__title">Sign Up</h2>
          <input type="text" placeholder="User" className="input" />
          <input type="email" placeholder="Email" className="input" />
          <input type="password" placeholder="Password" className="input" />
          <button className="btn" type="button">Sign Up</button>
        </form>
      </div>

      {/* 登录表单模块 */}
      <div className="container__form container--signin">
        <form 
          action="#" 
          className="form" 
          id="form2" 
          onSubmit={preventSubmit}
        >
          <h2 className="form__title">Sign In</h2>
          <input type="email" placeholder="Email" className="input" />
          <input type="password" placeholder="Password" className="input" />
          <a href="#" className="link">Forgot your password?</a>
          <button className="btn" type="button">Sign In</button>
        </form>
      </div>

      {/* 遮罩切换层 */}
      <div className="container__overlay">
        <div className="overlay">
          <div className="overlay__panel overlay--left">
            <button
              className="btn"
              type="button"
              onClick={() => setIsRightActive(false)}
            >
              Sign In
            </button>
          </div>
          <div className="overlay__panel overlay--right">
            <button
              className="btn"
              type="button"
              onClick={() => setIsRightActive(true)}
            >
              Sign Up
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default SlideSignInUp

• 优势：完全符合React单向数据流的设计，不存在DOM操作时机问题，多组件实例同时挂载也不会出现元素匹配错误，性能更优。

方案二：最小成本复用原原生脚本逻辑 #

如果需要最大程度保留原script.js的代码，只需要调整脚本的执行时机和DOM查找范围，不需要改动核心交互逻辑。
实现要点：

• 用useRef锚定组件的根DOM节点，所有DOM查找都在组件内部范围执行，避免全局匹配错乱
• 把原脚本的执行逻辑放在useEffect中，等组件DOM完全挂载完成后再执行事件绑定
• 组件卸载时在useEffect的清理函数里移除所有绑定的事件监听，避免内存泄漏
  完整实现：

import React, { useEffect, useRef } from 'react'
import './style.css'

const SlideSignInUp = () => {
  const rootRef = useRef(null)

  useEffect(() => {
    const root = rootRef.current
    // 以下代码和原script.js逻辑完全一致，仅把全局document查找替换为组件范围内查找
    const signInBtn = root.querySelector("#signIn")
    const signUpBtn = root.querySelector("#signUp")
    const fistForm = root.querySelector("#form1")
    const secondForm = root.querySelector("#form2")
    const container = root.querySelector(".container")

    const handleSignInClick = () => container.classList.remove("right-panel-active")
    const handleSignUpClick = () => container.classList.add("right-panel-active")
    const handleFormSubmit = (e) => e.preventDefault()

    signInBtn.addEventListener("click", handleSignInClick)
    signUpBtn.addEventListener("click", handleSignUpClick)
    fistForm.addEventListener("submit", handleFormSubmit)
    secondForm.addEventListener("submit", handleFormSubmit)

    // 组件卸载时清理监听
    return () => {
      signInBtn.removeEventListener("click", handleSignInClick)
      signUpBtn.removeEventListener("click", handleSignUpClick)
      fistForm.removeEventListener("submit", handleFormSubmit)
      secondForm.removeEventListener("submit", handleFormSubmit)
    }
  }, [])

  return (
    <div ref={rootRef}>
      {/* 以下结构和原CodePen导出的HTML完全一致，不需要修改 */}
      <div className="container right-panel-active">
        <div className="container__form container--signup">
          <form action="#" className="form" id="form1">
            <h2 className="form__title">Sign Up</h2>
            <input type="text" placeholder="User" className="input" />
            <input type="email" placeholder="Email" className="input" />
            <input type="password" placeholder="Password" className="input" />
            <button className="btn">Sign Up</button>
          </form>
        </div>
        <div className="container__form container--signin">
          <form action="#" className="form" id="form2">
            <h2 className="form__title">Sign In</h2>
            <input type="email" placeholder="Email" className="input" />
            <input type="password" placeholder="Password" className="input" />
            <a href="#" className="link">Forgot your password?</a>
            <button className="btn">Sign In</button>
          </form>
        </div>
        <div className="container__overlay">
          <div className="overlay">
            <div className="overlay__panel overlay--left">
              <button className="btn" id="signIn">Sign In</button>
            </div>
            <div className="overlay__panel overlay--right">
              <button className="btn" id="signUp">Sign Up</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default SlideSignInUp

• 优势：几乎不需要改动原script.js的核心逻辑，适配成本极低；通过控制执行时机解决了“脚本先于DOM加载”的报错问题。

避坑注意事项 #

• 不要在项目根目录的index.html中全局引入原script.js：全局脚本执行时React组件尚未渲染完成，必然会出现找不到DOM元素的报错；同时多实例场景下全局ID重复会导致交互错乱
• 只要使用原生addEventListener绑定事件，就必须在组件卸载时做移除操作，否则连续挂载/卸载组件会出现事件重复绑定、内存泄漏的问题

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