React Hooks中useState实现带参通用函数复用弹窗逻辑问题咨询

核心问题说明 #

React 的 useState 状态更新函数仅支持接收 1 个参数，你之前尝试给更新函数传递多个参数的写法本身不生效，后两个参数会被直接忽略。我们可以将弹窗状态从单纯的布尔值改为对象结构，同时存储弹窗的开关状态和所有个性化配置。

完整实现代码 #

import React, {useState} from "react"

const Section = ({ children }) => {
  return (
    <>
      <Wrapper children={children} />
    </>
  );
};

const HandlePages = () => {
  // 状态为null时弹窗关闭，非null时存储弹窗所有配置
  const [dialogueConfig, setDialogueConfig] = useState(null);

  return (
    <>
      {/* 通用弹窗渲染逻辑，仅需要写一次 */}
      {dialogueConfig && (
        <Section>
          <Headers 
            heading={dialogueConfig.title} 
            currentDialogue={dialogueConfig.currentPage} 
            pages={dialogueConfig.contents.length} 
          />
          {dialogueConfig.contents[dialogueConfig.currentPage]}
          {/* 关闭按钮示例，需要的话可以加在Headers或者Section里 */}
          <button onClick={() => setDialogueConfig(null)}>关闭弹窗</button>
          {/* 下一页按钮示例 */}
          <button 
            onClick={() => setDialogueConfig(prev => ({
              ...prev,
              currentPage: Math.min(prev.currentPage + 1, prev.contents.length - 1)
            }))}
            disabled={dialogueConfig.currentPage === dialogueConfig.contents.length - 1}
          >
            下一页
          </button>
          {/* 上一页按钮示例 */}
          <button 
            onClick={() => setDialogueConfig(prev => ({
              ...prev,
              currentPage: Math.max(prev.currentPage - 1, 0)
            }))}
            disabled={dialogueConfig.currentPage === 0}
          >
            上一页
          </button>
        </Section>
      )}

      {/* 触发按钮 */}
      <button 
        onClick={() => setDialogueConfig({
          title: "Foo Title",
          contents: fooContents,
          currentPage: 0
        })}
      >
        Click for Page Foo
      </button>
      <button 
        onClick={() => setDialogueConfig({
          title: "Bar Title",
          contents: barContents,
          currentPage: 0
        })}
      >
        Click for Page Bar
      </button>
    </>
  )
}

const fooContents = [
  //Lots of functionality specific to foo listed as the children of this function
];

const barContents = [
  //Lots of functionality specific to bar listed as the children of this function
];

export default HandlePages

关键逻辑说明 #

• 状态设计：用null代表弹窗关闭，非null时的对象存储弹窗标题、内容数组、当前页码三个核心参数，无需维护多组开关状态
• 触发逻辑：点击按钮时直接传入对应弹窗的配置对象即可完成弹窗打开，打开时自动将页码重置为0，避免不同弹窗的页码互相干扰
• 扩展逻辑：如果需要新增弹窗，只需要新增对应的内容数组，再加一个对应配置的触发按钮即可，不需要修改通用渲染逻辑
• 翻页逻辑：页码更新直接基于当前弹窗配置的状态修改，不会和其他弹窗的配置产生冲突

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