JavaScript/React中如何在map外使用遍历项的值生成点击跳转链接

问题原因 #

• 原有showBttn状态仅存储布尔类型的显示标记，没有保存点击卡片对应的条目数据
• infoDetails是map遍历过程中的局部变量，写在遍历外的链接组件无法直接访问该变量

修正后完整实现代码 #

1. 状态定义部分

// 把原来的布尔状态改成存储选中的条目，初始值为null代表未选中任何卡片
const [selectedInfo, setSelectedInfo] = useState(null);
// 自行替换为你的实际基础链接前缀
const BASE_URL = "你的基础链接地址";

2. 遍历渲染卡片部分

{info.map(infoDetails => (
  <div 
    className='card' 
    onClick={() => setSelectedInfo(infoDetails)}
    {/* 建议添加唯一key属性，优先用条目的唯一id，无id可临时用text替代 */}
    key={infoDetails.id}
  >
    <p>{infoDetails.text}</p>
  </div>
))}

3. 链接按钮渲染部分

{/* selectedInfo不为空时显示按钮，href直接从选中条目中取text拼接 */}
{selectedInfo && (
  <a href={`${BASE_URL}${selectedInfo.text}`}>
    <Button>My button</Button>
  </a>
)}

可选扩展逻辑 #

• 要实现点击同一张卡片隐藏按钮，可把卡片点击事件修改为：

  onClick={() => setSelectedInfo(selectedInfo?.id === infoDetails.id ? null : infoDetails)}
  

• 要单独加关闭按钮控制隐藏，直接调用setSelectedInfo(null)即可

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