React中如何将SendForm提交获取的verifyCode传给后续非父子组件

以下是适配该场景的4种常用实现方案：

方案1：状态提升（轻量场景首选） #

• 实现逻辑：将共享状态verifyCode提到两个组件的公共父组件存储，通过props回调和传值实现通信
• 实现步骤：
  1. 父组件定义verifyCode状态：const [verifyCode, setVerifyCode] = useState(null)
  2. 改造SendForm组件，在handleSubmitAccount拿到verifyCode后，调用父组件传入的onSubmit回调将值抛出：

  const handleSubmitAccount = () => {
    dispatch(createAccount(id, username))
      .then((response) => {
        const { verifyCode } = response;
        // 调用父组件传入的回调抛出值
        props.onSubmit({ verifyCode })
      })
  }
  

  3. 父组件的handleStepSubmit回调中接收值并更新状态，同时切换步骤显示FormConfirmation组件，将verifyCode通过props传入：

  const handleStepSubmit = (formData) => {
    // 判断是SendForm提交的场景
    if(formData?.verifyCode) {
      setVerifyCode(formData.verifyCode)
      // 切换到下一步的逻辑
      setCurrentStep(2)
    }
  }
  
  // 渲染时按步骤条件渲染，传值给FormConfirmation
  return (
    <>
      {currentStep === 1 && <SendForm onSubmit={handleStepSubmit} onFieldSubmit={handleFieldSubmit} />}
      {currentStep === 2 && <FormConfirmation verifyCode={verifyCode} onSubmit={handleStepSubmit} onFieldSubmit={handleFieldSubmit} />}
    </>
  )
  

• 优缺点：无需引入额外依赖，实现简单，适合层级较浅的场景；缺点是如果组件嵌套过深会出现props透传问题。

方案2：全局状态管理 #

• 实现逻辑：如果项目已经接入Redux、Zustand、Mobx等全局状态管理工具，直接将verifyCode存入全局store即可跨组件访问
• 实现示例（基于Redux）：
  1. 在对应状态切片中添加verifyCode状态和更新reducer
  2. SendForm拿到verifyCode后，dispatch更新action存入store：

  .then((response) => {
    const { verifyCode } = response;
    dispatch(setVerifyCode(verifyCode))
  })
  

  3. FormConfirmation组件中用对应钩子取全局状态即可：

  const verifyCode = useSelector(state => state.form.verifyCode)
  

• 优缺点：无需处理props透传，适合已经接入全局状态的中大型项目；缺点是小项目单独引入状态管理会增加冗余代码。

方案3：URL参数存储 #

• 实现逻辑：如果verifyCode不属于敏感数据，提交第一步后可以将值拼在下一步的URL查询参数中
• 实现示例（基于React Router）：
  1. SendForm提交完成后跳转下一步，拼接参数：navigate(/step-2?verifyCode=${verifyCode})
  2. FormConfirmation组件中获取参数：

  const [searchParams] = useSearchParams()
  const verifyCode = searchParams.get('verifyCode')
  

• 优缺点：刷新页面状态不会丢失，支持步骤页分享；缺点是敏感数据不能放在URL中，且参数长度有限制。

方案4：React Context 共享 #

• 实现逻辑：自定义FormContext封装共享状态和更新方法，包裹分步表单的父容器，两个组件分别消费Context实现通信
• 实现步骤：
  1. 创建Context：

  const FormContext = createContext({
    verifyCode: null,
    setVerifyCode: () => {}
  })
  

  2. 父组件用Provider包裹，传入状态值和更新方法：

  const [verifyCode, setVerifyCode] = useState(null)
  return (
    <FormContext.Provider value={{verifyCode, setVerifyCode}}>
      {/* 分步表单渲染逻辑 */}
    </FormContext.Provider>
  )
  

  3. SendForm中消费Context拿到set方法存值，FormConfirmation中消费拿到值即可。
• 优缺点：无需第三方依赖，可解决props透传问题；缺点是Context频繁更新可能触发不必要的组件重渲染，需要配合memo优化。

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