NextJS React代码优化：多必填链接对应不同错误横幅实现

原代码仅通过单个布尔值跟踪文档查看状态，无法适配多链接场景。我们可以通过配置化管理必填链接+状态对象跟踪每个链接的查看状态来实现需求，新增链接时只需添加配置项，无需修改核心逻辑。

具体实现步骤： #

1. 定义必填链接的配置结构
   把每个必填链接的信息（唯一标识、地址、显示文本、错误提示）统一配置，方便后续扩展：

interface RequiredLink {
  id: string; // 唯一标识，用于跟踪查看状态
  url: string;
  displayText: string;
  errorMessage: string; // 该链接对应的错误提示文本
}

// 示例配置，新增链接直接在这里添加项即可
const REQUIRED_LINKS: RequiredLink[] = [
  {
    id: "helm-doc",
    url: "/helm.pdf",
    displayText: "Helm文档",
    errorMessage: "请先查看Helm文档"
  },
  {
    id: "k8s-guide",
    url: "/k8s-guide.pdf",
    displayText: "K8s指南",
    errorMessage: "请先查看K8s指南"
  }
];

2. 重构父组件状态与逻辑
   用对象存储每个链接的查看状态，点击同意时校验所有必填链接的状态，收集未查看的错误提示：

import { useState } from 'react';
import { Box, Button } from '@mui/material'; // 可替换为你项目使用的组件库

function AgreeDocument(): JSX.Element {
  // 存储已查看的链接：key为链接id，value为是否查看过
  const [viewedLinks, setViewedLinks] = useState<Record<string, boolean>>({});
  // 存储需要显示的错误提示列表
  const [errorMessages, setErrorMessages] = useState<string[]>([]);

  // 标记指定链接为已查看
  const handleLinkClick = (linkId: string) => {
    setViewedLinks(prev => ({ ...prev, [linkId]: true }));
    // 点击链接后，移除该链接对应的错误提示
    const targetError = REQUIRED_LINKS.find(l => l.id === linkId)?.errorMessage || '';
    setErrorMessages(prev => prev.filter(msg => msg !== targetError));
  };

  // 处理同意按钮点击
  const handleAgreeClick = () => {
    const unviewedLinks = REQUIRED_LINKS.filter(link => !viewedLinks[link.id]);
    if (unviewedLinks.length > 0) {
      // 收集所有未查看链接的错误提示
      setErrorMessages(unviewedLinks.map(link => link.errorMessage));
    } else {
      // 所有链接都已查看，执行同意逻辑（比如提交表单、跳转页面等）
      console.log("所有文档已查看，同意操作执行");
    }
  };

  return (
    <Box>
      {/* 渲染错误横幅 */}
      {errorMessages.length > 0 && (
        <Box style={{ color: 'red', marginBottom: 16 }}>
          {errorMessages.map((msg, index) => (
            <div key={index}>{msg}</div>
          ))}
        </Box>
      )}
      {/* 渲染内容与链接 */}
      <Box>
        Hello, please provide me the info on these documents:
        {REQUIRED_LINKS.map(link => (
          <a
            key={link.id}
            href={link.url}
            onClick={() => handleLinkClick(link.id)}
            style={{ marginLeft: 8 }}
          >
            {link.displayText}
          </a>
        ))}
      </Box>
      {/* 同意按钮 */}
      <Box style={{ marginTop: 16 }}>
        <Button type="button" onClick={handleAgreeClick}>我同意</Button>
      </Box>
    </Box>
  );
}

核心优化点： #

• 配置化扩展：新增必填链接时，只需在REQUIRED_LINKS数组中添加新的配置项，无需修改组件核心逻辑。
• 独立状态跟踪：每个链接的查看状态独立存储，不会互相干扰。
• 精准错误提示：点击同意时，会显示所有未查看链接对应的专属错误提示，用户能明确知道需要查看哪些文档。
• 实时错误更新：点击某个链接后，会自动移除该链接对应的错误提示，提升用户体验。

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