我有兩個按鈕作為組件，需要下載兩個不同的檔案，但到目前為止，這兩個按鈕都下載了同一個檔案，這對我來說并不奇怪。我嘗試了不同的解決方案，使用和不使用 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;
uj5u.com熱心網友回復：
您可以像這樣將語言道具傳遞給按鈕：
<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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/465565.html
標籤：javascript 反应
下一篇：根據輸入減少/過濾陣列