React多步骤组件间传递模板名称的实现方案求助

问题背景 #

我使用了一个三步Stepper组件：第一步选择讣告模板，第二步预览选中的模板并添加用户输入文本。现在需要把SelectObituaryTemplate.js中选中的模板值传递到PreviewObituary.js中，请问该如何实现？

解决方案：状态提升到共同父组件 #

SelectObituaryTemplate和PreviewObituary都是CreateObituary的子组件，最直接的实现方式是把选中模板的状态提升到CreateObituary，通过props在组件间传递状态和更新方法。

以下是具体修改步骤：

1. 修改CreateObituary.js

将选中模板的状态移至该父组件，同时给子组件传递状态和更新回调：

import React, { useState } from 'react'
import Stepper from '../components/Stepper'
import StepperControl from '../components/StepperControl'
import { UseContextProvider } from '../contexts/StepperContext'

import PreviewObituary from '../components/steps/PreviewObituary'
import SelectObituaryTemplate from '../components/steps/SelectObituaryTemplate'
import ShareObituary from '../components/steps/ShareObituary'

const CreateObituary = () => {
  const [currentStep, setCurrentStep] = useState(1)
  // 把选中模板的状态提升到父组件
  const [selectedTemplate, setSelectedTemplate] = useState(null)

  const steps = ['Select Obituary Template', 'Details of the Deceased', 'Preview']

  const displayStep = (step) => {
    switch (step) {
      case 1:
        // 给子组件传递状态和更新方法
        return <SelectObituaryTemplate 
                  selectedTemplate={selectedTemplate}
                  onSelectTemplate={setSelectedTemplate}
                />
      case 2:
        // 把选中的模板传给预览组件
        return <PreviewObituary selectedTemplate={selectedTemplate} />
      case 3:
        return <ShareObituary />
      default:
    }
  }

  const handleClick = (direction) => {
    let newStep = currentStep

    direction === 'next' ? newStep++ : newStep--
    // 可选：从第一步到第二步时，校验是否已选模板
    if (direction === 'next' && currentStep === 1 && !selectedTemplate) {
      alert('请先选择一个讣告模板')
      return
    }
    newStep > 0 && newStep <= steps.length && setCurrentStep(newStep)
  }

  return (
    <div className='mx-auto rounded-2xl bg-white pb-2 my-6 shadow-xl md:w-3/4'>
      {/* Stepper */}
      <div className='horizontal container mt-5 '>
        <Stepper steps={steps} currentStep={currentStep} />

        <div className='my-10 p-10 '>
          <UseContextProvider>{displayStep(currentStep)}</UseContextProvider>
        </div>
      </div>

      {/* navigation button */}
      {currentStep !== steps.length && (
        <StepperControl
          handleClick={handleClick}
          currentStep={currentStep}
          steps={steps}
        />
      )}
    </div>
  )
}

export default CreateObituary

2. 修改SelectObituaryTemplate.js

移除组件自身的状态，改用父组件传递的props：

import React from 'react'
import ObituaryTemplateCard from '../ObituaryTemplateCard'

const SelectObituaryTemplates = ({ selectedTemplate, onSelectTemplate }) => {
  // 移除自身的useState，直接使用父组件传递的值和方法
  return (
      <section className='bg-white'>
        <div className='container px-6 py-10 mx-auto'>
          <h1 className='text-2xl font-semibold text-center text-gray-800 capitalize lg:text-3xl'>
            Obituary Templates
          </h1>
          <div className='grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 lg:grid-cols-2'>
          <ObituaryTemplateCard 
              template={{
                previewTemplateUrl: require("../../assets/obituary_templates/carnations_preview_template.png"),
                blankTemplateUrl: require("../../assets/obituary_templates/carnations_blank_template.png")
              }}
              isSelected={selectedTemplate === 'carnations'}
              onSelect={() => onSelectTemplate('carnations')}
            />
            <ObituaryTemplateCard 
              template={{
                previewTemplateUrl: require("../../assets/obituary_templates/rose_preview_template.png"),
                blankTemplateUrl: require("../../assets/obituary_templates/rose_blank_template.png")
              }}
              isSelected={selectedTemplate === 'rose'}
              onSelect={() => onSelectTemplate('rose')}
            />
          </div>
        </div>
      </section>
  )
}

export default SelectObituaryTemplates

3. PreviewObituary.js无需修改

该组件已经正确接收selectedTemplate props并根据值渲染对应模板，保持现有代码即可。

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