如何将const targetCV传入React组件的href属性？

原代码里targetCV是onDownloadCV函数的局部变量，没法直接传递给<a>的href属性。而且当前写法依赖点击时动态加载文件，其实可以直接根据当前语言提前生成CV的链接，让<a>标签直接完成下载操作，更简洁高效。

方法一：直接根据语言生成链接（推荐） #

组件渲染时就根据当前语言计算CV路径，语言切换时会自动更新，无需额外点击事件处理：

import { useTranslation } from "react-i18next";

const CTA = () => {
    const { t, i18next } = useTranslation();
    const lang = i18next.language;
    // 仅在语言为pt/en时生成有效路径，否则设为#避免无效跳转
    const cvUrl = (lang === "pt" || lang === "en") ? require(`../assets/cv_${lang}.pdf`) : "#";

    return(
        <div className="cta">
            <a href={cvUrl} download className="btn">{t("downloadCV")}</a>
            <a href="#contact" className="btn btn-primary">{t("contactButton")}</a>
        </div>
    );
};

export default CTA;

方法二：通过状态存储路径（适合需额外点击逻辑的场景） #

如果需要在下载前执行额外操作（比如日志统计），可以用状态变量存储生成的路径：

import { useTranslation, useState } from "react-i18next";

const CTA = () => {
    const { t, i18next } = useTranslation();
    const [cvUrl, setCvUrl] = useState("#");

    const onDownloadCV = () => {
        const lang = i18next.language;
        if(lang === "pt" || lang === "en"){
            const targetCV = require(`../assets/cv_${lang}.pdf`);
            setCvUrl(targetCV);
            // 这里可以添加额外逻辑，比如记录下载行为
        }
    };

    return(
        <div className="cta">
            <a href={cvUrl} onClick={onDownloadCV} download className="btn">{t("downloadCV")}</a>
            <a href="#contact" className="btn btn-primary">{t("contactButton")}</a>
        </div>
    );
};

export default CTA;

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