React.js：如何使用兩個不同的獨立 Button 組件下載兩個不同的文件？

Question

我有兩個按鈕作為需要下載兩個不同文件的組件，但到目前為止，這兩個按鈕都下載同一個文件，這對我來說並不奇怪。 我嘗試了不同的解決方案，使用 useState() 和不使用，但似乎都沒有用。 我知道我在這里缺少邏輯，但我不明白我在哪里缺少它。 如何在單擊第一個按鈕時下載不同的文件，然后在單擊另一個按鈕時下載另一個文件？ 我也應該回顧一下嗎？

這是代碼：

Hero.js（父組件）

import Button from "../../components/UI/Button/Button";

const Hero = () => {

  return (
    <div>
      <div>
        <Button>CV (English)</Button>
        <Button>CV (Another Language)</Button>
      </div>
    </div>
  );
};

export default Hero;

Button.js（子組件）

import cv from "../../../assets/files/CV English.pdf";
import anotherLanguage from "../../../assets/files/anotherLanguage.pdf";

const Button = (props) => {
  const file = cv;

  return (
    <button>
      {file === cv ? (
        <a href={cv} download="CV English">
          {props.children}
        </a>
      ) : (
        <a href={anotherLanguage} download="CV Another Language">
          {props.children}
        </a>
      )}
    </button>
  );
};

export default Button;

Answer 1

您可以像這樣將語言道具傳遞給按鈕：

      <div>
        <Button language="en">CV (English)</Button>
        <Button>CV (Another Language)</Button>
      </div>

然后像這樣在 Button 組件中使用它：

import cv from "../../../assets/files/CV English.pdf";
import anotherLanguage from "../../../assets/files/anotherLanguage.pdf";

const Button = (props) => {
  const file = cv;

  return (
    <button>
      {props.language === "en" ? (
        <a href={cv} download="CV English">
          {props.children}
        </a>
      ) : (
        <a href={anotherLanguage} download="CV Another Language">
          {props.children}
        </a>
      )}
    </button>
  );
};

export default Button;